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: