Frameworks and tools for theweb of the future

Frameworks and libraries................................................................................................... 01

AngularJS........................................................................................................................ 02

Polymer........................................................................................................................... 04

React.............................................................................................................................. 06

ECMAScript6.................................................................................................................... 08

Babel............................................................................................................................... 10

Browserify........................................................................................................................ 11

Gulp/Grunt....................................................................................................................... 12

Webpack.......................................................................................................................... 13

NPM................................................................................................................................ 13

JSPM............................................................................................................................... 15

PostCSS........................................................................................................................... 16

Conclusion....................................................................................................................... 17

Index

FRAMEWORKS AND LIBRARIES

01The web is progressing in leaps and bounds. The go-to technology now might be utterly oversha-dowed in very little time by a new library or framework.

Do you remember Knockout.js, MooTools or Back-bone? Some are still used in the industry, but their popularity has plunged following the release of Angu-lar, Polymer and React.

In this ebook we examine the current scenario for the web ecosystem, development trends and the frameworks and tools that are likely to be key in future.

There are currently three major projects used by most web applications. Some are complete frameworks, such as AngularJS, while others are libraries that resolve specific problems, such as React for rendering displays and Polymer for creating web components.

Frameworks and libraries

The ha-

Back-t their of Angu-

ario for the the frameworksks

Angular is a MVVM (Model-View View-Model) or MVW (Mo-del-View-Whatever) framework that uses JavaScript for the fron-tend of web applications. It was developed and is maintained by Google, and has a large commu-nity of developers. It emerged back in 2009, but didn't achieve popularity until 2013 and 2014, when it knocked BackboneJS from its throne as the go-to

framework for developing web applications.

The popularity of the framework has seen it form part of a new stack for web software develo-pment. To date, the majority of projects had been based on the LAMP stack (Linux + Apache + MySQL + PHP). The arrival of No-de.js, a runtime environment that allows the use of JavaScript

language for the backend of web applications, led to the creation of MEAN stack (MongoDB + Express + AngularJS + NodeJS). This allowed use of the same language, JavaScript, for all web developments, both frontend and backend.

AngularJS

02

FRAMEWORKS AND LIBRARIES

Angular has something of a unique learning curve. Despite seeming easy to use at first, the more complex that develo-pments get the trickier it is to get to grips with. Luckily, thanks to guidelines and the open source development of third party projects, practically any development problem can be tackled using a library that has already been developed.

When developing applications with Angular, where the framework takes care of everything (controllers, routes, views, etc.), we use SPAs (Sin-gle Page Application).This makes for a very good user experience, similar to that of a mobile application, with pages

or views changed fluidly and without lag.

Angular offers a great ecosys-tem. So much so that, capitali-zing on the benefits of SAP applications, it has even been extended to the mobile world via projects such as Ionic. This project allows the

development of mobile applica-tions using AngularJS. based on guidelines created and opti-mized for displays on mobile devices. There is also the Apache Cordova project (for-

merly Phonegap), to convert developments into Android and iOS applications. This has seen the development of hybrid applications, which are very useful for testing applica-tions in the two most common mobile operating systems.

More information: https://angularjs.org/http://ionicframework.com/

“AngularJS. based on guidelines created and optimized for displays on mobile devices”

03

FRAMEWORKS AND LIBRARIES

This means reusable compo-nents may be created that export third party APIs, such as easily embedding a YouTube video, a Google Map, a payment gateway via PayPal, Stripe, etc. Being reusable, they can be de-veloped as open source pro-jects so that any developer can implement them on their own projects.

But Polymer has grown very rapidly. It no longer is just about HTML tags for embedding com-ponents in applications. Poly-mer has now divided its com-ponents into a number of types that can be viewed on its website: https://ele-ments.polymer-project.org/

They are divided into core Poly-mer elements, components

based on Material Design, tags to encapsulate Google components, animations and more.

Among the more interesting are Platinum elements, allowing the use of very handy HTML elements such as offline features, push notifications, etc.

This is interesting because it serves as an introduction to the new paradigm of progressive apps. Such apps offer a number of benefits.

Polymer

04

FRAMEWORKS AND LIBRARIES

This is now essential for any application or website. Mobile internet traffic now outstrips that from desktop PCs. If a website displays poorly on mobile devices, it is liable to lose customers, sales, users, etc.

Previously such services came with native applica-tions only. It was an excellent means of retaining application users. And just like offline use, HTML5 service workers make this possible.

New technologies such as service workers mean web applications can now display content offline. When using a native app, features within the application will always be available even when no internet connection is available. This is made possible by service workers, representing the first step on the path to progressive applications.

05

• Mobile First

• Offline First

• Push Notifications

At the time of writing this ebook, service workers are not supported yet by all browsers. But this is gradually changing. They work perfectly with Google Chrome and Android. Other browsers are likely to adopt them soon.

For more information:http://webcomponents.org/https://www.polymer-project.org/1.0/

FRAMEWORKS AND LIBRARIES

Not long ago a new library called React emer-ged on the scene and has been making life diffi-cult for Angular. React is a library created by Facebook and used on its social network and

Instagram for display rendering. It is not a framework like Angular or Backbone. It is a library that can be used in conjunction with the above.

06

React

React's popularity resides in the fact that it makes develop-ment easy. The learning curve is somewhat easier to follow than Angular, and the library is very easy to use.

React development is based on components. Instead of develo-ping full applications using the Model-View-Controller design, complexities are broken down into small components and their functionalities. This is

similar to the approach taken with Polymer, but instead of using web components and creating reusable components outside of the application, reusa-ble components are implemen-ted within the application itself.

FRAMEWORKS AND LIBRARIES

React is very fast thanks to its virtual DOM. Accessing the DOM using JavaScript is one of the slowest aspects of any web application. React deals with the problem by creating a virtual DOM, overlaid on the page's original DOM, which is then mo-dified based on user or applica-tion requirements.

One very appealing aspect of React is the ability to use the latest specification of the EC-MAScript standard,which follows JavaScript language. This ensures that the library adapts to

improvements and changes to the language.

And the library has more treats in store. By focusing solely on the web application display, it can be used for the backend with Node.js. This has opened a new paradigm for web application development. Although Angular brought us the MEAN stack, React with Node.js introduces, with the help of libraries develo-ped by third parties, the concept of isomorphic applications.

What does this mean? With an

SPA application we benefit from improved speed and user expe-rience, but there's a problem. The content of an SPA is injec-ted with JavaScript, which comes via servers or APIs. The content is therefore not rendered from the server, which affects the page's SEO. An isomorphic application allows views used in the frontend to be reused and harnessed from the backend. This provides the speed and user experience qualities of SPA appli-cations, with the SEO benefits provided by server-side applica-tion rendering.

07

FRAMEWORKS AND LIBRARIES

Capitalizing on the fact that React is a library for displays, regardless of which browser is used, its de-velopment team created the React Native project. This new library allows development of native applications for iOS and

Android using JavaScript and cer-tain components established by the team. This takes the Ionic system one step further. Ionic allows developers to create hybrid applications, meaning an optimized web application that is

embedded in a mobile app web display. React Native, meanwhi-le, provides a native application, as if developing in Objective C, Swift or Java, but using JavaS-cript as if it were being progra-med for the web.

Despite being included in this section, ECMAScript6 is not a framework but still plays a very important role on the web. JavaScript lan-guage is based on W3C standards, specifically ECMA. JavaScript has come in a number of versions

since its creation 20 years ago. The first stable version dates back to 1997. Ver-sion 3 is from 1999, while 3.1 came in 2008. And we have had version 5.1 since 2011.

08

ECMAScript6 (ES6 o ES2015)

FRAMEWORKS AND LIBRARIES

Version 6 was approved in June 2015, and browsers have gradua-lly incorporated the new develop-ments that came with it. Although not all the improvements are yet available, developers can now use its syntax via code translators known as transpilers.

The new version follows in the footsteps of JavaScript preproces-sors such as CoffeeScript, using arrow functions to reduce the amount of code and make it more readable.

ECMAScript6 makes JavaScript a very complete code, bringing clas-

ses, modules and native functions that were only previously possible via third party libraries, such as Pro-mises, requesting data via AJAX, etc. And the modules are very important. These allow application code to be separated into small files, without needing an external framework or library.

In software development the most important aspect is the language used, but the tools we use day-to-day are also key, helping to improve and optimize developments and allowing programmers to focus on code.

The field of JavaScript tools is very wide field, just as extensive or more so than that of frameworks and libraries available for the web frontend. So many different technologies can sometimes feel overwhelming. The reason for this ebook is to illus-trate all the available options, making readers fami-

09

Tools

FRAMEWORKS AND LIBRARIES

Babel is a transpiler of EC-MAScript 6 to ECMAScript 5. What is a transpiler? These are tools that allow you to write in one language and then trans-form it to another. Babel, pre-viously known as 6to5, allows

the development of web appli-cations using the latest version of the JavaScript standard (ES6 and even some features from the forthcoming ES7), then transforming the same to the version currently suppor-

ted by all browsers, standard 5.1.

This means developers can already use the language ver-sion that will very soon be har-nessed natively by browsers.

Babel

10

FRAMEWORKS AND LIBRARIES

Browserify is a tool that allows use of the CommonJS syntax utilized in Node.js, in the fron-tend of web applications.

Previously in order to modulari-ze the front-end programming logic of webapps into small files, developers had to link all

JavaScript files in HTML via script tags, or use libraries such as RequireJS, which utili-zes AMD syntaxes to create modules.

Browserify makes this easier, by supporting programming with the simplicity afforded by Node.js, utilizing modu-le.export to export the created modules and require to import the same, all without too much complication.

The tool concatenates and minifies all the required Ja-

vaScript code. It seems the tool will no longer be required once ES6 arrives on the scene, but it is still used together with the Babelify plugin, which unites all ECMAScript 6 and translates it to the 5.1 syntax currently understood by brow-sers.

Browserify

11

FRAMEWORKS AND LIBRARIES

If you are a professional web developer you probably use CSS preprocessors such as Sass, Less or Stylus, as well as tools such as Browserify and Babel to translate your code to JavaS-cript. You will have a develop-ment environment and a pro-duction environment where your code is prepared and opti-mized for use.

To make sure everything is in order there are task mana-gers and automators. These are files with engines that can perform specifically established tasks such as CSS precompiling, the concatenation of JS files,

minifying the same, image opti-mization, etc.

The first to emerge for the fron-tend environment was Grunt. By establishing a Gruntfile with tasks configured in JSON format, and using open source plugins developed by third par-ties, we can perform all func-tions that would take a long time if performed "manually". Such

tools allow developers to focus back on their code and save time.

Grunt was much loved and used widely at its peak, but then a competitor emerged. Gulp does the same as Grunt but faster, more legibly and its tasks can be defined using JavaScript ins-tead of JSON.

Gulp ousted Grunt from its throne in the world of task ma-nagement and automation thanks to its simplicity and because all the plugins develo-ped for Grunt can likewise be found for Gulp.

Gulp/Grunt

12

FRAMEWORKS AND LIBRARIES

Webpack

13

This module bundler tool gained popularity thanks to the use of React. It replaces Grunt/Gulp in build and production preparation tasks (preprocessing, concatena-tion, minifying, etc.).

Like the above task managers, Wepack also has a large commu-nity of users and there are plenty of plugins allowing the most frequent and important tasks to be performed.

NPM stands for Node Package Manager and is used with Node.-js. But it also includes modules and libraries for Node.js and brow-sers, as well as plugins for task managers: Grunt, Gulp, Webpack and tools such as babel, postcss, etc.

NPM has established itself as a standard when starting web projects, as it is both a frontend application and backend via No-de.js, as well as being used for small modules that address speci-fic problems.

NPM

FRAMEWORKS AND LIBRARIES

It serves as a manifesto to list the dependencies used in each pro-ject, with the version numbers, description, etc., as well as to run commands via the ‘script’ object. This means develop-ment commands may be run without having to use managers such as Gulp, or may be called directly via scripts.

Parallel to NPM we have Bower, a dependencies manager for brow-sers, allowing the download and use of library projects such as jQuery, Angular, Backbo-ne, etc. But the emergence of projects such as Browserify, supporting module importing, or better still ECMAScript 6 that does the same natively, allow the use of NPM. In fact, a majo-

rity of projects, if not all, have been shifted from Bower to NPM, doing away with the need to have two configuration files and dependencies (package.json for NPM and bower.json for Bower). With NPM everything can be grouped into a single module manager and file.

1411111444444444444444444444444444444444444444444444444444444444444444444444444444444444444

FRAMEWORKS AND LIBRARIES

JSPM

15

JSPM is the acronym for JavaS-cript Package Manager. It can be described as an extended NPM for the JavaScript ecosys-tem. With NPM developers need only install modules and libraries that are in the NPM registry. In contrast, with JSPM several sites can be indicated, one of which is NPM, but it also allows installa-tion from GitHub or from the JSPM registry.

This supports the use lof the latest project versions available in GitHub, regardless of whether they are in NPM or not, and even the use of private modules that

may not necessarily be in the NPM registry.

JSPM is also based on the EC-MAScript6 native module loading system, called System-JS, which works with a similar syntax and approach to the RequireJS library, but natively without the need to import others.

This is an interesting system that will give us plenty to talk about over the coming months, as it integrates perfectly with NPM and does not require additional configuration files. Just a single package.json.

can ed ys-

eed ies In may not necessarily be in th

FRAMEWORKS AND LIBRARIES

PostCSS

16

And we mustn't overlook PostCSS. The web development ecosystem is not all about JavaS-cript. CSS also has a very impor-tant role to play.

Instead of using straight CSS, until now developers have used preprocessors such as Less, Sass or Stylus, allowing the use of variables, functions, etc. This meant handling CSS like a pro-gramming language and allowed a nimbler approach to projects.

One of the problems with prepro-cessors is that they generate a CSS that cannot later be

edited. Code may be generated that we do not want, not matter how much the code has been optimized in the preprocessor syntax.

With PostCSS we can write straight CSS, while retaining full control over what is written at all times. And this tool (which runs under Node.js) allows the final result to be modified via plugins, such as the autoprefixer, so that we do not have to concern ourselves with writing all the prefixes for each specific brow-ser.

PostCSS has been joined by

CSSNext. What's that? Just as there has been progress in JavaScript specifications, mea-ning tools like Babel can now be used with it, there has been a similar trend in CSS. New specifi-cations are being developed, for example to use variables in CSS. Browsers do not yet support it, but CSSNext as a PostCSS plugin allows code CSS style code to be written with future syntax, while ensuring it can run on exis-ting browsers.

FRAMEWORKS AND LIBRARIES

Conclusion

17

The future of the web looks livelier than ever. Indeed, the technologies that we use now may well seem obsolete next year.

One thing for certain is that this is a vital time for the web, and it is worth keeping up with all new

developments as they emerge, getting familiar with them and identifying the best solutions for a given problem.

The key is keeping an open mind and remembering that web applications are growing

increasingly large. They need to be modularized into small compo-nents, with their own logic and able to form larger structures, thus piecing together full develop-ments in a more scalable and easily maintained approach.

FRAMEWORKS AND LIBRARIES

Registerto keep abreastof the lastest

trends

talks to us at:

BBVA is not responsible for the opinions published in this document.

wwww.bbvaopen4u.com

Sharethis ebook