Sage-Code Laboratory
index<--

JavaScript Frameworks

Frameworks are basicly application templates used to start a JavaScript project. A framework has one or more libraries, folder structure and templates. Using these resources your productivity to create a dynamic website is greatly improved. In this tutorial we take a look at most popular frameworks.

Bookmarks:

Introduction to React

React is a JavaScript library for building SPA (Single Page Applications). In other words React is a JavaScript library for building user interfaces using components. It can be used to create the view in a MVC application. MVC stands for Model View Controller.

React is not a new language. It is a technology paradigm that separate concerns into a web application. It is a framework created and maintained by Facebook. You can include this library in your web-pabes and then use React programming to create web pages that can change contend dynamically, driven by certain events.

SPA = Simnge Page Applications: This kind of applications are appreciated because you do not need to refresh your page using refresh buton. The page is updated automatically, therefore the name "reactive page" or "reactive application".

Why learn React

React does a good job to improve your productivity when is about programming dynamic websites. So learning React will enable you to build a modern and responsive website. That is a website that is mobile friendly and can be used on desktop as well. Many software companies are looking for web developers with React skills.

React secrets

React is using HTML5 features, CSS and JavaScript to create UI components. So react is an application of new technology. React is open source and free to use. It is available on GitHub and it has MIT License.

How to learn

React can be learned on-line for free from its homepage. There is available documentation and one tutorial. Before you learn React you need to know HTML+CSS and JavaScript. There is no point of starting if you do not know these things:

Using React

React can be added to a HTML page like any other JavaScript library using <script> tag. Then you can use its features gradually to enhance your page with dynamic components. To create these dynamic components you must create your own JavaScript files and add them to your web page after you load React libraries.

 <!-- ... other HTML ... -->
 <!-- Load React. -->
 <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 <!-- Load our React component. -->
 <script src="my_component.js"></script>
</body>

Note: You must load React components at the bottom of your HTML page to improve page load time. You could have load them in the header but that will slow down your web-page so don't do it.

How it works?

To display react components you must include them in your page using an empty <div> tag. This tag must have an "id" attribute. This is how React will be able to find the location where it will display the component. In the next example we include a placeholder for a React component:

<!-- ... HTML content ... -->
<div id="component_name"></div>
<!-- ... rest of HTML ... -->

How a component look like

A component is created using JavaScript. You can use a component template to start. Here is an example that we have copy from React documentation. I have not tested this component so I do not know if is going to work:

File: my_component.js

'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
    constructor(props) {
         super(props);
         this.state = { liked: false };
    }
    render() {
         if (this.state.liked) {
         return 'You liked this.';
    }
    return e(
         'button',
         { onClick: () => this.setState({ liked: true }) },
         'Like'
    );
    }
}
const domContainer = document.querySelector('#component_name');
ReactDOM.render(e(LikeButton), domContainer);

What is JSX

You can build apps using React in two ways:

Now JSX is something new and intriguing. It stands for JavaScript XML. It is a new language that consist of JavScript mingled with XML or XHTML. JSX makes it easier to write and add HTML in React. JSX is an extension of the JavaScript language based on ES6, and is translated into regular JavaScript at runtime.

So does your browser understand JSX? No it does not. But to use JSX you need a pre-procesor that will translate JSX files into row JavaScript. In other words, if JavaScript files contains JSX, that file will have to be transpiled into regular JavaScript.

React include a transpiler called Babel. It converts JSX files into vanila JavaScript. React also uses ES6 that is not supported by all browsers. Babel converts ES6 to code that is compatible with older browsers that do not support ES6.

Standard approach:

(function() {
    var element = React.DOM.div({}, "Hello World");
    ReactDOM.render(element, document.getElementById("app"));
})();

Using JSX:

(function() {
    var HelloWorld = React.createClass({
        render : function() {
        return (
            <div> Hello World </div>
        );
        }
    });
    var element = React.createElement(HelloWorld, {});
    ReactDOM.render(element, document.getElementById("app"));
})();

Using Babel

You can use Babel in two ways. At client side or at server side. During development or for making examples you can include Babel client in your web page but you can also use Babel on server side. You can use Babel to pre-compile you application using command line interface  CLI or even better, use a build tool like Webpack to run Babel each time your code changes.

Learn more about: Babel

Can I use react with Bootstrap?

Sorry, React and Bootstrap are not designed to be used together. Bootstrap is using JQuery to manipulate DOM elements directly while React has its own libraries to manipulate DOM. However there is one Bootstrap implementation that is specific for React. This library is called reactstrap and is open source.

Example:

import React from 'react';
import { Button } from 'reactstrap';
export default (props) => {
    return (
        <Button color="danger">Danger!</Button>
    );
};

Note: The example above is using JSX. It will create a button that does absolutely nothing. What is interesting is that this button do not exist until JavaScript is making it. In a static web-page we must create de button using HTML.

Create React App

Browsing randomly I have found a project that looks interesting. This project is open source and it combines the technology I have mentioned above into a single tool useful to start a React SPA. It is available on GitHub and apparently is maintained by Facebook.

This project uses: WebPack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. You can use this to create your startup project in minutes and develop on top of it your application. After you run and install it you will get a structure of folder with files that look like this:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
 ├── App.css
 ├── App.js
 ├── App.test.js
 ├── index.css
 ├── index.js
 ├── logo.svg
 ├── serviceWorker.js
 └── setupTests.js

Note: This is not the only technology you can use to start a React application. You can use other technology more advanced

Related References

React Native

React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, Web and UWP (Universal Windows Platform) by enabling developers to use React along with native platform capabilities.

React Native does not use HTML or CSS. Instead, messages from the JavaScript thread are used to manipulate native views. React Native also allows developers to write native code in languages such as Java for Android and Objective-C or Swift for iOS which make it even more flexible.

You can learn more from: React Native Homepage


Vulcan framework

Vulcan is a framework that gives you a set of tools for quickly building React & GraphQL-based web applications. It can handle data loading, e-mail notifications, automatic form generation, and much more, out of the box.

References

Introduction to Vue.js

Vue.js is an approachable, versatile, performant and progressive JavaScript framework that help you build maintainable and testable dynamic websites. It was created by Evan You who worked for Google using AnglularJS.

Some people say Angular was overengineered and is now difficult to use in applications. For some even React is too complex, so here it is Vue that is simplified and distinct. We look forward to use this library in some of our projects.

Notes:

Architecture

Vue.js implements model-view-view-model architecture: MVVM. This facilitate the separation of development for graphical user interface (view) from the development of business logic (the model). The ViewModel is an intermediary component that convert data elements from model to visual components to be display in view. You can read more about this architecture here: Wikipedia MVVM

Components Vue components are custom HTML element that encapsulate code. The code represents behavior that makes the HTML element dynamic. That is it can change it's display properties and content. The HTML element is identified by Vue using an attribute: id="name". This is similar to React.

Templates Vue uses HTML template syntax. Templates can use JSX syntax. This enable applications to be created using CBD (Component Based Development) methodology. Using reusable components with templates you can improve your productivity to create complex apps.

Reactivity Vue is a reactive system. That means each component keeps track of its dependencies. So the system knows when to re-render a component. This is the secret of a reactive webpage. It refresh itself without the need for you to press the refresh button. This feature is also one of the goals of modern web applications.

Transition Vue enable animation effects to be used for components. That means when a new component is created or removed, it is not displayd immediately but it can have an effect, for example: fading, sliding. These opperations can use CSS or custom JavaScript libraries such as velocity.js

Routing Vue provides an interface to change what is displayed on the page based on the current URL path. That means you can make applications that enable creation of bookmarks. This is cool because a SPA (Single Page Application) usually have a single page. And the URL do not change when you do something in that page. Vue doesn't come with front-end routing. But the open source "vue-router" package provides an API to update application's URL.

References

You have not learned Vue just yet. So far you know what Vue is and what it can do. Next you must visit project homepage, follow the Vue free video lectures and red Vue documentation. Then you can join Vue discord group and start your first project. Do not be afraid to ask questions on Discord about Vue. This community is very responsive.

Project:

Tools

Libraries


Introdction to Svelte

Svelte is a tool for building fast web applications. It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces.

Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.

Higlighted features:

So before we dive into learning how to use Svelte, let's learn what it can do for us and why the effort to learn it. I have just copy these from Svelte homepage and try to make sense of it all.

write less code

Reducing the amount of code you have to write is an explicit goal of Svelte. Unlike React and Vue, Svelte will help you avoid boilerplate code. Svelte is actually like a new language that must be compiled in order to work.

no virtual DOM

There is a claim that DOM of the browser is slow. DOM="Document Object Model". Therefore reactive frameworks: Vue and React are having a parallel DOM that is more efficient. This claim is temporary maybe true but in time we know that companies optimize and improve upon things. So in the future we think the original DOM will become more efficient. Therefore Svelte do not use a virtual DOM.

truly reactive

Svelte 3 moves reactivity out of componet API and into the Svelte language. It enable creation of: cybernetically enhanced web apps. Moving reactivity into the language compiler. Svelte becomes a low level declarative language that create reactivity at compile time improving efficiency at runtime.

Learning Svelte

Introduction to Angular

Angular is a platform for building mobile and desktop web applications. It is developed and maintained by Google. It is a MVC (Model View Controler) framework for TypeScript. Angular and AngularJS are two different things.

Angular version 11 was released on November 11, 2020. Each version is expected to be backward-compatible with the prior release. The Angular development team has pledged to do twice-a-year upgrades.

AngularJS is a JavaScript framework written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag. AngularJS extends HTML with ng-directives.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

Learning Angular

Introduction to Ember

This is an open source reactive JavaSript framework similar to Angular. They say: "Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device".

Ember.js is an open source JavaScript framework under MIT license. It uses the MVC (Model-View-Controller) architecture pattern. In Ember.js, route is used as model, handlebar template as view and controller manipulates the data in the model.

Highlighted Features

1. It provides the Command Line Interface utility that integrates Ember patterns into development process and focuses easily on the developer productivity.

2. It supports data binding to create the link between two properties and when one property changes, the other property will get upgraded with the new value.

Learning Ember

They say ember is used by many well known companies. This list is impresive. Probably if you want to apply for one of these companies you should study a little bit more about Ember.

Examples

For examples, whatch my Twitch streaming channel. One of next sessions I will use JavaScript frameworks so you can learn from my videos. Until then, have fun reading other tutorials that I have posted and check-out my examples on codepen.io website.


Read next: Server Side JS