Ebook: Frameworks and tools for the web of the future (English)

Frameworks and tools for the

web of the future

FRAMEWORKS AND LIBRARIES

Index Frameworks and libraries...................................................................................................

AngularJS........................................................................................................................

Polymer...........................................................................................................................

React..............................................................................................................................

ECMAScript6....................................................................................................................

Babel...............................................................................................................................

Browserify........................................................................................................................

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

Webpack..........................................................................................................................

NPM................................................................................................................................

JSPM...............................................................................................................................

PostCSS...........................................................................................................................

Conclusion.......................................................................................................................

01 02 04 06 08 10 11 12 13 13 15 16 17

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

Do you remember Knockout.js, MooTools or Backbone? Some are still used in the industry, butt their popularity has plunged following the release of Angular, Polymer and React.

01

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

Frameworks and libraries 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

AngularJS

Angular is a MVVM (Model-View View-Model) or MVW (Model-View-Whatever) framework that uses JavaScript for the frontend of web applications. It was developed and is maintained by Google, and has a large community 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 development. To date, the majority of projects had been based on the LAMP stack (Linux + Apache + MySQL + PHP). The arrival of Node.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.

02

FRAMEWORKS AND LIBRARIES

Angular has something of a unique learning curve. Despite seeming easy to use at first, the more complex that developments 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 (Single 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 ecosystem. So much so that, capitalizing on the benefits of SAP applications, it has even been extended to the mobile world via projects such as Ionic. This project allows the

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

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

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

03

FRAMEWORKS AND LIBRARIES

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

This means reusable components 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 developed as open source projects 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 components in applications. Polymer has now divided its components into a number of types that can be viewed on its website: https://elements.polymer-project.org/ They are divided into core Polymer elements, components

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.

04

FRAMEWORKS AND LIBRARIES

• Mobile First

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.

• Offline First

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.

• 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.

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

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

05

FRAMEWORKS AND LIBRARIES

React

Not long ago a new library called React emerged on the scene and has been making life difficult for Angular. React is a library created by Facebook and used on its social network and React's popularity resides in the fact that it makes development easy. The learning curve is somewhat easier to follow than Angular, and the library is very easy to use.

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.

React development is based on components. Instead of developing 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, reusable components are implemented within the application itself.

06

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 modified based on user or application requirements.

One very appealing aspect of React is the ability to use the latest specification of the ECMAScript 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 developed by third parties, the concept of isomorphic applications.

What does this mean? With an

SPA application we benefit from improved speed and user experience, but there's a problem.

The content of an SPA is injected 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 applications, with the SEO benefits provided by server-side application rendering.

07

FRAMEWORKS AND LIBRARIES

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

Android using JavaScript and certain 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, meanwhile, provides a native application, as if developing in Objective C, Swift or Java, but using JavaScript as if it were being programed for the web.

ECMAScript6 (ES6 o ES2015) Despite being included in this section, ECMAScript6 is not a framework but still plays a very important role on the web. JavaScript language 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. Version 3 is from 1999, while 3.1 came in 2008. And we have had version 5.1 since 2011.

08

FRAMEWORKS AND LIBRARIES

Version 6 was approved in June 2015, and browsers have gradually incorporated the new developments 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 preprocessors 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 Promises, 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.

Tools 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 illustrate all the available options, making readers fami09

FRAMEWORKS AND LIBRARIES

Babel

Babel is a transpiler of ECMAScript 6 to ECMAScript 5.

What is a transpiler? These are tools that allow you to write in one language and then transform it to another. Babel, previously known as 6to5, allows

the development of web applications 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 version that will very soon be harnessed natively by browsers.

10

FRAMEWORKS AND LIBRARIES

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

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

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

Browserify makes this easier, by supporting programming with the simplicity afforded

by Node.js, utilizing module.export to export the created modules and require to import the same, all without too much complication.

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 browsers.

The tool concatenates and minifies all the required Ja-

11

FRAMEWORKS AND LIBRARIES

Gulp/Grunt 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 JavaScript. You will have a development environment and a production environment where your code is prepared and optimized for use.

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

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

minifying the same, image optimization, etc.

The first to emerge for the frontend environment was Grunt.

By establishing a Gruntfile with tasks configured in JSON format, and using open source plugins developed by third parties, we can perform all functions that would take a long time if performed "manually". Such

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 instead of JSON. Gulp ousted Grunt from its throne in the world of task management and automation thanks to its simplicity and because all the plugins developed for Grunt can likewise be found for Gulp.

12

FRAMEWORKS AND LIBRARIES

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

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

NPM NPM stands for Node Package Manager and is used with Node.js. But it also includes modules and libraries for Node.js and browsers, 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 Node.js, as well as being used for small modules that address specific problems.

13

FRAMEWORKS AND LIBRARIES

It serves as a manifesto to list the dependencies used in each project, with the version numbers, description, etc., as well as to run commands via the ‘script’ object. This means development 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 browsers, allowing the download and use of library projects such as jQuery, Angular, Backbone, 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.

14 14

FRAMEWORKS AND LIBRARIES

JSPM JSPM is the acronym for JavaScript Package Manager. It can be described as an extended ed NPM for the JavaScript ecosysystem. With NPM developers need eed only install modules and libraries ies that are in the NPM registry. In contrast, with JSPM several sites can be indicated, one of which is NPM, but it also allows installation 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

the may not necessarily be in th NPM registry.

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.

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

15

FRAMEWORKS AND LIBRARIES

PostCSS And we mustn't overlook PostCSS. The web development ecosystem is not all about JavaScript. CSS also has a very important role to play.

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

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 programming language and allowed a nimbler approach to projects.

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 browser.

One of the problems with preprocessors is that they generate a CSS that cannot later be

PostCSS has been joined by

CSSNext. What's that? Just as there has been progress in JavaScript specifications, meaning tools like Babel can now be used with it, there has been a similar trend in CSS. New specifications 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 existing browsers.

16

FRAMEWORKS AND LIBRARIES

Conclusion

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

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

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

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

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

17

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

Register

to keep abreast of the lastest trends

Share this ebook

www.bbvaopen4u.com

talks to us at: