Getting Started with Uranium JS

Uranium Js is a tool that used to creates heavy webpages with a great performance. This guide will go through the all necessary modules with examples to create a web application. We assume you install the Uranium Js into your local environment successfully. if you not, do not worry follow the very easy step in How to Install page.you can find that page by clicking the Install button on top of the right side in the navigation bar.

Uranium Js is with RPC architecture. that means Routes Pages and Components. We will describe this architecture later. Before getting started to make sure uranium js is working properly as described in How to Install page.

Now its time to dive deep in Uranium Js...

For getting started open a new command-line interface and navigate to the Uranium Js project folder. you can use Command Prompt in Windows and bash terminal in UNIX like system. we assume that the navigate folder is Uranium Js. run ujs init command on this. this will return some information log on the command-line.

ujs init

information: ujs init command doing several things.it creates controllers, routes and pages folders inside the project folder for place business logic. This does command only runs the first time when user use uranium js.if what happen user accidentally run ujs init command after some time in developing? Nothing, ujs only create a new folder if the folder is not there.it will never replace with a new one. if the user needs to replace all three folders with new ones you need to run ujs init command with --force or -f flag.

ujs init -f or ujs init --force

Uranium Js using browserify for the bundle all dependencies in the project and use gulp js to stream building system.For activate gulp with browserify run ujs start command

ujs start

this will run gulp js stream building and bundle all dependencies into dist folder. gulp js stream building system bundle update bundle.js file inside the dist folder automatically every time the user updates the project.

Uranium Js Under the hood

As we said Uranium Js has RPC architecture. All the business logic are playing around this. Uranium Js has three main modules Routes, Pages and Components.lets go one by one. before the start with Routes we will explain what is the Pages is

What is Pages,

Web applications are a collection of multiple web pages.in the early, we have to create every single web pages individually, but in the SPA, the Single Page Application comes into drama everything has been changed. SPAs are reduced the DOM read. it means cost-effective.but the user sides it's complex to develop SPA. Uranium Js is also a Single Page Application. But it gives the user a very simple mechanism to create pages with the Pages Module. Pages module is just folder in Uranium Js. Every single page in the web application is created here. this is the explanation of Pages modules in Uranium Js. We will describe creating Pages in Uranium js with examples in the rest of the documentation.

What are Components,

Now you know what is the Pages modules in Uranium Js. and now we describe the Components module in Uranium Js. you know the Pages modules hold all pages in web application. but in the Uranium Js Page files in the Pages folder are hold the only structure of the page. what does that mean? it means page files in Pages modules are a blueprint of the web page. there are not UI nodes [the HTML nodes] in these pages files. it only says this is how my pages should like. where is the UI nodes? yes, all UI nodes like HTML nodes are placed in components modules.

Imagine your web page has Navigation Bar with several buttons, this collection of nodes we called it a component. Every component in the application is created inside the components module. Components modules is a folder like Pages modules. we create components inside the components module and pass those components to pages. This structure allows the user to control all components in one place. Not only that it increases reusability. imagine user create multiple pages web application with same Header and Footer, the user only has to create two components for two both header and footer and place that into all pages.

What are Routes

Finally, we come to routes modules. Routes is very simple modules. Yes, its representation as a folder like other modules and also one single file called routes.ts that place inside the routes folder. routes modules is used to say which pages should render in which path to Uranium js core.

Now you have some idea about what is the RPC mean.in the rest of the documentation, we will create pages, components and pass these components into pages and connect those pages with routes. let's get started,

Before creating Pages you have to get an idea of Element in Uranium Js. If you already have a good idea it's better to skip this section and move into Creating Pages section. if you have not strongly recommended to read this section carefully.

Element in Uranium Js

Creating Pages

Pages module is located inside the controllers folder not only Pages others modules also places in the controllers folder. when the user run ujs init command controllers folder is created with these three modules. if you are not familiar with this command go to the beginning of this documentation. it describes how to use this command.

the single page is represented as one single typescript files in the Uranium Js. so create new typescript file inside the Pages modules. lets we called it LandingPage.ts. As we