Proton-framework NPM

Proton

Proton is frontend framework inspired from Flutter.

To begin, let's take a look at a StatelessWidget

class HomePage extends StatelessWidget {
  build(context) {
    return GestureDetector({
      child: Text("Hello world!"),

      onTap: () => log("just got a click!"),
    });
  }
}

You might have spotted the difference. Proton is a TypeScript framework and example shown above is actually written in TypeScript.

Let's take a look at how to use above widget:

new ProtonApp({
    target: "root-div",
    home: Container({
        child: new HomePage(),
    });
});

To run this example, you've to install Proton.

Install

npm install proton-framework or (npm i https://github.com/erlage/proton-framework for in-dev version)
Create a empty <body>/<div> tag to mark the spot where you want to display ProtonApp:
```
<body>
  <div id="root-div"></div>
</body>
```

Import ProtonApp & Widgets:

import { ProtonApp, Container, Text } from "../node_modules/proton-framework/dist/proton.js";

Create a ProtonApp inside your ts code:

new ProtonApp({
  key: "proton-app",
  target: "root-div",
  home: Container({
    child: Text("Hello world!"),
  }),
});

Done! you can test it in a Web browser.

Let's talk more about Widgets in Proton,

Widget props

Each widget accept different set of properties(params, props, whatever).

Widget's key property is one of the most important prop. Internally key is used as widget indentity for lookups on rebuilds. Therefore it must uniquely identifies a widget in your entire app. For that reason, it's made optional and framework will take care of generating it for you. However you can set it if you want just make sure to keep it unique app-wide.
Styling props are CSS specific props which can be used to directly apply CSS rules on a widget... read more.
Layout props deals with Widget's layout. Widgets that accept props such as width-height also accept special props which can be used to alter the default way framework measure provided values... read more.