FACILITATING THE SPREAD OF KNOWLEDGE AND INNOVATION IN PROFESSIONAL SOFTWARE DEVELOPMENT

Next Generation
HTML5 and JavaScript eMag Issue 25 - March 2015

ARTICLE Q&A ARTICLE

The Modern JavaScript Matthew Carver on React in Real Life

Developer’s Toolbox The Responsive Web at Codecademy
Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 1
The Modern JavaScript
Developer’s Toolbox Virtual Panel: Real-World
The toolbox of the modern JavaScript developer has changed a lot
in the last 20 years. From IDEs to build automation tools, there are
JavaScript MVC Frameworks
plenty of options for developers. Choosing the best JavaScript library is
JavaScript front-end codebases grow larger and more
only part of the process. Linters, bundlers, and minifiers are essential
difficult to maintain. As a way to solve this issue developers
to productivity and performance when building modern web apps.
have been turning to MVC frameworks which promise
increased productivity and maintainable code. InfoQ
asked the opinion of experts practitioners about how they
use these frameworks and the best practices they follow
when developing JavaScript applications.

Q&A with Matthew Carver

on The Responsive Web
Responsive web design is an important part of the
modern web and a must-have skill for web developers.
The Responsive Web by Matt Carver provides an
introduction and suggestions on how to get started.
Beginning with the what and why and moving all the
way to some advanced techniques, Carver provides a
solid overview of an essential tool in the modern web
developer’s toolbox.

React in Real Life at

Codecademy
Codecademy recently switched to React.js
Towards a Resolution- for their front-end learning environment.
While many React examples are basic,
Independent Web with SVG author Bonnie Eisenman goes over how to
This article examines the advantages of using Scalable Vector use React in a large, critical environment.
Graphics (SVG) as the preferred format for the graphic assets
of any web or mobile web project. The aim here is not to deter
designers and developers from the proven method of using raster
formats (PNG / JPEG) but rather to showcase how usage of SVGs
can enhance the workflow of any web project.

FOLLOW US CONTACT US
GENERAL FEEDBACK [email protected]

ADVERTISING [email protected]

EDITORIAL [email protected]
facebook.com @InfoQ google.com linkedin.com
/InfoQ /+InfoQ company/infoq
 NEW YORK
Jun 8-12, 2015
Conference for Professional Software Developers
qconnewyork.com

SAVE $100 WHEN YOU REGISTER WITH PROMO CODE “JAVASCRIPT”

Tracks for QCon NY 2015
• Applied Data Science and Machine Learn- • High Performance Streaming Data - Scal-
ing - Putting your data to use. The latest pro- able architectures and high-performance
duction methods for deriving novel insights frameworks for immediate data over per-
• Engineering Culture - Building and scaling a sistent connections
compelling engineering culture • Reactive Architecture Tactics - The how
• Modern Advances in Java Technology - Tips, of the Reactive movement: Release It! tech-
techniques and technologies at the cutting niques, Rx, Failure Concepts, Throughput,
edge of modern Java Availability

• Monoliths to Microservices - How to evolve • Architectures You’ve Always Wondered

beyond a monolithic system -- successful mi- about - Learn from the architectures power-
gration and implementation stories ing some of the most popular applications
and sites
• The Art of Software Design - Software Arch
as a craft, scenario based examples and gen- • Continuously Deploying Containers in Pro-
eral guidance duction - Production ready patterns for grow-
ing containerization in your environment
• Architecting for Failure - War stories and les-
sons learned from building highly robust and • Mobile and IoT at Scale - Trends and technol-
resilient systems ogies for building mobile applications

• Emerging Technologies in Front-end De- • Modern Computer Science in the Real

velopment - The state of the art in client-side World - How modern CS tackles problems in
web development the real world

• Fraud Detection and Hack Prevention - • Optimizing Yourself - Maximizing your im-
Businesses are built around trust in systems pact as an engineer, as a leader, and as a per-
and data. Securing systems and fighting fraud son
throughout the data in them.
 DAVID isCode
InfoQ’s HTML5/JavaScript Lead Editor. He is the founder of Heavy
and Principal Software Developer at the University of Illinois.
IFFLAND He tweets at @daveiffland.

developer can deliver high-quality, fast JavaScript

and CSS – perfect for the modern web.
InfoQ editor Dio Synodinos hosts a virtual
panel with leaders of the JavaScript community to
talk about MVC frameworks. They cover the kinds of
problems frameworks solve, mobile, performance,
and workflows. The article provides a glimpse behind
the keyboard of JavaScript developers around the
globe.
Much of this eMag covers JavaScript, but as long as
it’s client-side, all the JavaScript in the world won’t
A LETTER FROM matter without HTML5. We’re expected to build
web apps and sites that work not just on a desktop
THE EDITOR browser, but on a mountain of mobile devices. I have
the pleasure of interviewing Matt Carver, author of
The Responsive Web, to hear what he thinks about
the challenges of building responsive web sites.
In 2010, Apple debuted the iPhone 4 and
the first “Retina Display”, a term used to describe
displays with high pixel densities. While this was
great for users, designers and developers now have
JavaScript is chaotic. The pace of change is faster than to contend with images that don’t look right on all
ever and it seems like a new framework or important screens. Angelos Chaidas guides us through the use
library pops up every couple of weeks. A major shift of SVG to combat this excessive work. Beyond simple
in the language is about to hit when ECMAScript 6 is uses, Angelos not only covers adding animation and
finalized this year. interactivity, but also provides insights on how SVG
Modern web developers have to juggle more fits into the workflow.
constraints than ever before; standing still is not an Wrapping up, Bonnie Eisenman tells the
option. We must drive forward and this eMag is a story of how Codecademy started using React.js in
guide to getting on the right track. We’ll hear from production. Created by Facebook, React.js boasts
developers in the trenches building some of the most one of the fastest browser rendering systems, and
advanced web applications and how to apply what it’s starting to catch the attention of developers
they’ve learned to our own work. everywhere. Online, so many samples and demos
David Haney of StackOverflow starts us off with are “toy” apps that don’t get to the meat of what
a description of what’s in the toolbox of a JavaScript a production app needs. Bonnie shows us what
developer in 2015. IDEs are just the start. Gone are works and what doesn’t along with guidance for
the days of dropping jQuery into a project as the first introducing React to your web app.
and only JavaScript library. Whether it’s AngularJS, HTML5 and JavaScript are the oldest parts of
ReactJS, or something else that’s popped up in the web, yet they’re changing every day. I hope this
the last ten minutes, choosing the right JavaScript eMag will help you come up to speed on the current
libraries is an important step. By adding gulp, linters, state of web development and assist you on your
bundlers, and minifiers to the toolchain, the modern quest for glory.

4 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

 READ ONLINE ON InfoQ

The Modern JavaScript Developer’s Toolbox

David Haney is the core-team engineering manager at Stack Exchange, creator of question
and answer websites such as Stack Overflow and Server Fault. He spends his days supporting
developers by solving problems and improving processes. He was previously a lead developer
on Fanatics’ e-commerce platform, which hosts over 10,000 websites including the NFL Shop
(official online shop of the NFL) and NBAStore.com (the official NBA store). David is the creator of
Dache, an open-source distributed-caching framework. His spare time is spent drinking beer and
participating in community user groups and programming events, often simultaneously.

JavaScript is a scripting language initially designed to enhance web pages

but is now used in almost every way imaginable. Advances have been made
that allow JavaScript to run on the server side as well as to be compiled into
native phone application code. Today’s JavaScript developer is part of a rich
ecosystem filled with hundreds of IDEs, tools, and frameworks. With so many
options and resources, some developers may find it difficult to know where to
begin.
A quick jaunt through history potential. Occasionally, an alert would pop up to tell
Let’s take a quick trip back to 1995 when Netscape you something, text in a box that delivered news
Navigator and Internet Explorer 1.0 were the browsers would scroll, or a cookie would store your name and
of choice. Websites had annoying blinking text and display it back to you when you returned months
far too many GIFs. A site full of rich content could take later. There were surely no jobs where JavaScript was
two minutes to load on a dial-up connection. Along the primary language, save those lucky few who had
the way, a web language was born that allowed the job of actually creating JavaScript. In short, it was
these ancient websites to execute client-side code. a gimmick for websites to fancy up their DOM.
This was the year that gave birth to JavaScript. Today, JavaScript can be found virtually
The websites of 20 years ago didn’t use everywhere. From AJAX, to Bootstrap, to React,
JavaScript much, and certainly not to its full AngularJS, the ubiquitous jQuery, and even Node.js

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 5

on the server side, JavaScript has become one of the to developers. This is a big part of why you see
most important and popular web languages. JavaScript everywhere.

Frameworks jQuery
One of the biggest ways JavaScript has changed jQuery was created in 2006 by John Resig. It provides
since its inception is in its use. Gone are the days a rich set of tools that abstract and simplify cryptic
of awkward document.GetElementById calls and and rigid JavaScript commands and methods. The
cumbersome XmlHttpRequest objects. Instead, easiest way to demonstrate this is by example of an
helpful libraries have abstracted much of the root AJAX request made with vanilla JavaScript: (Code 1)
functionality, making JavaScript more accessible And here is the same AJAX request made with
jQuery (Code 2).
001 function loadXMLDoc() {
002 var xmlhttp;
003
004 if (window.XMLHttpRequest) {
005 // code for IE7+, Firefox, Chrome, Opera, Safari
006 xmlhttp = new XMLHttpRequest();
007 } else {
008 // code for IE6, IE5
009 xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
010 }
011
012 xmlhttp.onreadystatechange = function() {
013 if (xmlhttp.readyState == 4 ) {
014 if(xmlhttp.status == 200){
015 alert(“success”);
016 }
017 else if(xmlhttp.status == 400) {
018 alert(“error 400”)
019 }
020 else {
021 alert(“something broke”)
022 }
023 }
024 }
025
026 xmlhttp.open(“GET”, “test.html”, true);
027 xmlhttp.send();
028 }

Code 1 / Source: Stack Overflow

001 $.ajax({
002 url: “test.html”,
003 statusCode: {
004 200: function() {
005 alert(“success”);
006 },
007 400: function() {
008 alert(“error 400”);
009 }
010 },
011 error: function() {
012 alert(“something broke”);
013 }
014 });

Code 2

6 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

 jQuery made difficult JavaScript functions easy vanilla JavaScript to render a list of 1,000 items to the
to use and DOM manipulation a snap. As a result, DOM (Image 1)
it was one of the first widely used frameworks for If performance is important to your application,
JavaScript, and the idea of abstraction that came React is the way to go.
with it was the basis upon which other frameworks
were modeled. The JavaScript development
environment
AngularJS An important part of efficient development is the use
AngularJS, typically called simply “Angular”, hit the of an integrated development environment (IDE).
scene in 2009. It was created by Google to make it An IDE is an application that offers a suite of tools
much easier to build single-page applications (SPAs). to a developer. The most important of these tools is
Like jQuery, it aims to abstract the difficult work into typically a rich-text editor, which often offers syntax
highly reusable methods. It provides a model-view- highlighting, autocomplete, and keyboard shortcuts
controller (MVC) architecture for JavaScript. that speed up annoying manual processes.

React Sublime Text

React is new to the game. It was created by Sublime Text is not actually an IDE. It is a lightweight,
Facebook and released for the first time in 2013. super-fast, programming text editor that offers
Facebook considers React to be a new take on the syntax highlighting and intuitive keyboard shortcuts.
SPA problems that Angular works to solve. You It’s cross-platform, which is excellent for developers
would be correct to consider Angular and React as who want to use a Mac in a Windows shop or vice
competing frameworks but what really separates versa. Virtually everything about Sublime Text can
React from Angular is that React is a more efficient, be customized. It also offers multiple plugins that
higher-performance, quantifiably faster library. The enable IDE-like capabilities such as Git integration
below chart shows the time taken by React, Angular, and linting. This is a terrific choice for enthusiasts
Knockout (a library not discussed in this article), and

Image 1 / Source: The Dapper Developer

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 7

Image 2 / source: Sublime Text

Image 3 / Source: JetBrains

and new JavaScript developers alike. A Sublime Text JavaScript debugger and integrated unit testing with
license costs US$70 at the time of writing. (Image 2) popular frameworks such as the Karma test runner,
JSDriver, and even Mocha for Node.js.
WebStorm One of the nicest features of WebStorm is the
WebStorm was created by the JetBrains team as a LiveEdit functionality. By installing a plugin into
smart IDE focused on HTML, CSS, and JavaScript. It both Chrome and WebStorm, a developer can make
costs US$49, plus another US$29 for upgrades each source-code changes that are instantly reflected in
year beyond the first (for individuals). WebStorm the browser. Developers can also configure LiveEdit
is widely considered the de facto standard for to highlight the changes that are made in the browser
seasoned JavaScript professionals, and for good window, making both debugging and coding highly
reason. The built-in code-completion and inspection productive.
tools are second to none. WebStorm also offers a rich

8 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

Image 4 / Source: Brackets

Overall, WebStorm is the IDE to pick if JavaScript Just change the CSS values. Alternatively, you can
is your full-time job. (Image 3) download and apply one of many themes created
for Atom. This allows Atom the flexibility to become
Brackets anything that you’d like it to be. Atom is an excellent
Brackets is an open-source, free IDE built with a focus tool for new JavaScript developers and enthusiast
on visual tools. Brackets offers a live editing feature hackers alike. (Image 5)
similar to WebStorm that lets you instantly see the
results of code changes in a browser window. It also Build tools and automation
supports side-by-side editing, which allows you to The modern JavaScript project tends to be fairly
work on the code and see the results simultaneously complex, with many moving parts. This is not
without the need for tabbing between applications due to inefficiencies in the language or tools; it
or pop-up windows. One of the most interesting is a direct result of the rich, vibrant, and complex
features of Brackets is called Extract. It analyzes web applications that are being built today. When
Photoshop (PSD) files in order to retrieve font, working on a large project, there will be many
color, and measurement information. This feature repetitive processes that you must do whenever
makes Brackets an excellent choice for JavaScript you want to check in your code or build out to
developers who also do design work. (Image 4) production. These could be things like bundling,
minification, compilation of LESS or SASS CSS files,
Atom and even running tests. Doing this work manually is
Atom is an open-source, free rich text editor created frustrating and inefficient. It’s better to automate the
by GitHub. It is very approachable and easy to use; work via a build tool that supports tasks.
you can install and run it without ever touching
a configuration file and it just works. The most Bundling and minification
interesting part of Atom is its ability to customize all Most of the JavaScript and CSS that you write will
of its aspects (GitHub calls it “hackable”). Atom is built be shared across a few web pages. As a result, you
upon a web core, enabling you to customize its look will likely place them in .js and .css files, and then
and feel with standard HTML, CSS, and JavaScript. reference those files on your web page. This will
Want a different background and text color in Atom? cause the visitor’s browser to make an HTTP request

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 9

Image 5 / Source: Atom

to retrieve each of these files (or at least verify that a panoramic photo together at the seams in order to
they haven’t changed) in order to fully render your create a single, contiguous photo. By bundling our
web app. JavaScript and CSS files, we eliminate much of the
HTTP requests are expensive. On top of the HTTP request overhead.
payload size, you also pay the costs of network
latency, headers, and cookies. Bundling and Minification
minification tools are designed to reduce or eliminate Another way that a JavaScript developer can improve
these costs entirely. performance is by minifying their newly bundled
code. Minification reduces JavaScript and CSS to
Bundling their smallest possible forms while maintaining full
One of the simplest things that a developer can do functionality. For JavaScript, this means renaming
to improve the performance of their web code is to variables to nonsensical single-character tokens,
bundle it. Bundling is the process of stitching multiple and removing all white space and formatting. For
JavaScript or CSS files into a single JavaScript or CSS CSS, which relies on the names of variables, this
file. This is just like stitching the individual pieces of typically means only removing formatting and white

10 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

001 $.ajax({
002 url: “test.html”,
003 statusCode: {
004 200: function() {
005 alert(“success”);
006 },
007 400: function() {
008 alert(“error 400”);
009 }
010 },
011 error: function() {
012 alert(“something broke”);
013 }
014 });
015 Here’s the same code minified:
016 $.ajax({url:”test.html”,statusCode:{200:function(){alert(“success”);},
017 400:function(){alert(“error 400”);}},error:function(){alert(“something broke”);}});

Code 3

space. Minification drastically improves network rules. The kinds of errors reported are things like
performance because it reduces the number of bytes using tabs instead of spaces, missing semicolons at
sent in each HTTP response. the ends of lines, or curly braces without an if, for, or
Look at our un-minified segment of AJAX while declaration. Most IDEs come with linting tools;
JavaScript code from earlier: (Code 3) others offer the ability to install a linting plugin.
Note that I broke the minified output into The most popular JavaScript linters are JSHint
two lines to display it in this article. The actual output and JSLint. JSHint is developed by the community
of minification is typically a single line. and is a fork of JSLint, the original linting framework
Usually, the bundle and minify steps are built by Doug Crockford. These two linters vary a
only done in production. This is so that you can little in the format standards they enforce. My advice
debug your code locally or in a development is to try both and use whichever one best fits your
environment as is, complete with formatting and style of coding.
line numbers. Debugging the minified code above
would be difficult: all of the code would be on line 1. Automating things: Grunt
Minification makes the code completely unreadable, Despite the name, Grunt is far from primitive. It is a
which would be useless and frustrating for you to robust command-line build tool that executes user-
attempt to debug. defined tasks. By specifying a simple configuration
file, you can configure Grunt to compile LESS or SASS,
Source map files build and minify all of the JavaScript and CSS files
Sometimes a bug in your code occurs that is only in specific folders, or even run a linting tool or test
reproducible in production. This poses a problem framework. You can also configure Grunt to execute
when you need to debug the issue but all of your as part of a Git hook that minifies and bundles
code is minified. Fortunately, JavaScript supports your code whenever you check something into the
source-code map files that map the minified code source-control repository.
to the original code. The map file for your code is Grunt supports named targets so that you
generated during minification via build tools such can specify different commands for different
as those described below. Your favorite JavaScript environments; you could define “dev” and “prod” as
debugger then uses the map file to provide you targets, for example. This is useful for scenarios such
with legible code to debug. You should deploy your as bundling and minifying your code in production
production code with map files whenever possible, but leaving it alone in the development environment
so that you can debug the code if anything goes so that it is easy to debug.
wrong. A useful feature of Grunt is “grunt watch”, which
monitors a directory or set of files for changes.
Linting This can be integrated directly with IDEs such as
A linting tool analyzes your code for common WebStorm and Sublime Text. With grunt watch,
mistakes and deviations from defined formatting you can trigger events based on file changes. A

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 11

practical application of this approach is LESS or SASS This is a Gulp file configured to compile SASS
compilation. By configuring grunt watch to monitor files to CSS whenever a file changes:
your LESS or SASS files, you can compile them
immediately whenever a file is changed, making 001 gulp.task(“sass”, function () {
the output of the compilation immediately available 002 gulp.src(“app/styles/**/*.scss”)
003 .pipe(sass())
to your development environment. You could also
004 .pipe(autoprefixer(“last 1
use grunt watch to automatically run a linting tool
version”))
against any file that you edit. Real-time execution of 005 .pipe(gulp.dest(“dist/styles”));
tasks via grunt watch is a terrific way to boost your 006 });
productivity. 007 gulp.task(“default”, function() {
Automating things: Gulp 008 gulp.run(“sass”);
Grunt and Gulp are direct competitors that 009 gulp.watch(“app/styles/**/*.scss”,
strive to solve the same build-automation problems. function() {
The major difference between Grunt and Gulp is 010 gulp.run(“sass”);
that Grunt focuses on configuration while Gulp 011 });
focuses on code. While you’d configure build tasks 012 });
via declarative JSON in your Grunt file, you’d write Source: Jack Hsu
JavaScript functions in your Gulp file to accomplish Use whichever one you prefer. Both of these
the same. tools are typically installed via npma, a Node.js
This is a Grunt file configured to compile SASS package manager.
files to CSS whenever a file changes:
In summary
001 grunt.initConfig({ JavaScript has evolved significantly since its birth
002 sass: { amidst the early days of the Web. Today, it is a
003 dist: { prominent and important feature of interactive web
004 files: [{ applications.
005 cwd: “app/styles”, The developer has also evolved significantly
006 src: “**/*.scss”, since 1995. Today’s modern JavaScript developer
007 dest: “../.tmp/styles”, employs rich and robust frameworks, tools, and IDEs
008 expand: true,
to work efficiently and productively.
009 ext: “.css”
010 }]
Building your first modern JavaScript
011 } application is easier than you may think! Just choose
012 }, an IDE (I recommend Atom for beginners), and then
013 autoprefixer: { install npm and Grunt. If you get stuck along the
014 options: [“last 1 version”], way, Stack Overflow is an excellent resource. With
015 dist: { just a little time spent learning the basics, you’ll
016 files: [{ be well on your way to releasing your first modern
017 expand: true, JavaScript app.
018 cwd: “.tmp/styles”,
019 src: “{,*/}*.css”,
020 dest: “dist/styles”
021 }]
022 }
023 },
024 watch: {
025 styles: {
026 files: [“app/styles/{,*/}*.
scss”],
027 tasks: [“sass:dist”,
“autoprefixer:dist”]
028 }
029 }
030 });
031 grunt.registerTask(“default”,
[“styles”, “watch”]);
Source: Jack Hsu

12 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

 READ ONLINE ON InfoQ

Virtual Panel:
Real-World JavaScript MVC Frameworks

by Dio Synodinos
THE PANELISTS

Igor Minar is a software engineer Matteo Pagliazzi is a passionate

at Google. He is the lead of software developer and an open-
AngularJS, a practitioner of test- source contributor.
driven development, an open-
source enthusiast, and a hacker.

Julien Knebel is a self-taught Brad Dunbar is a JavaScript

interface designer and a front-end programmer and a frequent
developer living in Paris where contributor to the Backbone.js
he is freelancing for some of the and Underscore projects.
biggest French companies.

John Munsch is a professional software developer with over 27 years of experience. These
days, he’s leading a team building modern web-app front ends with AngularJS after a
couple of years spent doing the same kind of work with Backbone.js, Underscore, and
Handlebars.

Julio Cesar Ody is a software developer, designer, presenter, and wannabe writer who lives
in Sydney. He works a lot with mobile web development,and has a built a handful of tools
which he’s very proud of.

Thomas Davis is the founder of Backbone Tutorials, co-founder of CDNJS, and a developer
for Taskforce. He’s also a daily contributor to many other open-source projects, which can be
found at github.com/thomasdavis.

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 13

As the browser end up executing more and more logic, JavaScript front-end
codebases grow larger and more difficult to maintain. As a way to solve this
issue, developers have been turning to MVC frameworks, which promise
increased productivity and maintainable code.

Back in 2013, InfoQ had asked the community to rank JavaScript MVC frameworks according to the features
they had and how mature they were. You can see the result in the following figure.

InfoQ has asked a handful of expert practitioners about how they use these frameworks and the best
practices they follow when developing JavaScript applications.

14 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

 concrete understanding of the framework. These
What is your favorite JavaScript MVC framework, posts have received millions of views and still do.
how long have you been using it, and what is the The current archives are at backbonetutorials.com.
fundamental problem that it helps you with? When building a product these days, the user
experience and design is as crucial as the necessity of
Matteo Pagliazzi: AngularJS is actually the keeping the site up. Single-page applications allow
framework of the moment, and it’s not only a matter you to make user experiences that traditional pages
of GitHub stars: it has the biggest number of libraries, cannot match due to page reloading. For example,
modules, etc. and it’s being talked about (and used) imagine using Facebook if every like and every
by a lot of developers. It’s obvious that we (devs) comment made the page refresh.
like it. This is, I think, because it’s very easy to get
started with. It takes five minutes to have something
even not trivial working but at the same time it’s
very powerful. So the learning curve gets steep as How does the framework you use compare with
you move from the basic things to the core of the the many alternatives?
framework, when you find out it’s very complex.
Julien Knebel: I’ve been developing with Ember.
js for more than two years now on five production Julien Knebel: Ember.js performs really
web apps. I’d say that it gave me flexibility, speed, well! I never imagined it would let me code entire
and confidence so I could focus more on shaping apps almost all by myself. AngularJS is also really
the whole user experience instead of investing huge good though; I really like how fast you can get up
amount of time in complex features, like a robust and running with it. However, I believe it tends to
asynchronous router for instance. become more and more tedious as your codebase
Brad Dunbar: My favorite is Backbone.js. It grows. On the other hand, I had more difficulties at
provides simplicity and flexibility that others don’t. the beginning with Ember.js but they started to melt
Also, perhaps more importantly, its code is generally like snow in the sun after a couple of “aha!” moments
simple and readable. while learning it. Another important point (at least
John Munsch: My favorite framework is for me) is “componentization“. I disliked how Angular
AngularJS, I’ve been using it just over a year and the Directives deals with this and Ember Components
honeymoon is not over yet. really feel like the right way of doing it.
The fundamental problem I look for any front- Brad Dunbar: I find that it’s very rare that a
end framework to solve is to give me something with JavaScript library can precisely fill all the needs of my
sufficient bones, muscle, and connective tissue to application. This means that I often end up writing
help me build a complex UI on the front-end not just around them. Backbone’s functionality is small and
comparable to but better than what we could have provides utilities that I can compose instead of larger
built with a request/response back-end framework pieces that aren’t exactly what I need.
like JSP, PHP, Rails, etc. in the past. John Munsch: That’s a tough one; my
Julio Cesar Ody: I mostly use Backbone.js, and experience only stretches to Backbone.js (just under
increasingly React.js has replaced Backbone.js views two years’ experience) and AngularJS (just over a
for me. year). But between those two, I don’t think it’s a
All web applications I build run fully in the tough choice at all.
browser, and communicate with a server using an Backbone.js was okay, but we had a large
API and/or WebSockets. This means I end up writing project with as many as half a dozen people working
a lot of logic in JavaScript, so Backbone.js helps me on it at its peak and the problem we got into was
keep things orderly and maintainable. with all of the large gaps in Backbone.js that you
Thomas Davis: My first experience with typically fill with other software (two-way binding,
formalized JavaScript MVCs was late 2010 and at validation, templating, AMD, etc.). If you don’t figure
the time I was deciding between using Backbone.js out your solutions for all of those gaps before you
and SproutCore. I posted a comparison of the two, start, every developer in the group ends up filling it
which reached the front page of Hacker News and his or her own way. If you’re under a time crunch and
received over 100,000 views. Based on the feedback writing really fast, it can be really difficult to catch
at the time, I decided to use Backbone.js because it all of the divergence and enforce much consistency.
was minimal and didn’t stop me from implementing We ended up with a working project at the end and
complex functionality without being confined by it was way faster than the old solution but it was a
the conventions of a larger framework. As I learned chimera; every part of it appeared to be a different
Backbone.js, I wrote tutorials to give myself a more animal. With AngularJS, a lot more of those parts are

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 15

part of the framework itself and there’s less room for at my previous employer. Because they needed to
that kind of problem. run an additional web interface on barcode guns in
Julio Cesar Ody: I’d say Backbone.js is the most warehouses and hangars, we crafted a secondary
minimal, but that’s not a particularly useful point UI which was a handful of pages built just for the
to focus on. Ultimately, what one resonates with guns. They used the same technology as the desktop
the most and, in a way, the one that you’re happier browser UI and the pages called the same back-end
working with is also the one you’re going to be most API but the pages were smaller and simpler for the
productive with. small touch screens on the guns.
So between Backbone.js, AngularJS, and Ember. In that environment, it seemed a better solution
js, you can’t go wrong. I’m leaving React.js out since than trying to make a responsive version of existing
it’s really just a UI components library, so it shouldn’t pages which would need to drop 80% of their
be confused with an applications framework. functionality on mobile. (We were very lucky that
Thomas Davis: A lot has changed since 2010 good-quality barcode guns with HTML5 browsers
and even though I am always trying to break out of became available before the project was due to ship.
my old habits, I still use Backbone.js at the moment. Early work was done with guns that only had IE 5.5
It has remained minimal and hasn’t changed any of available. *shudder*)
its core beliefs or methods. Though in my opinion, If I were to return to this project today, the
it definitely is on the verge of being superseded by first thing I would probably do is add Grunt for
the competition. Efforts made by libraries such as concatenation, minification, and revisioning of the
AngularJS to give developers more intuitive control JavaScript to speed up the mobile and desktop
over the DOM make Backbone.js seem archaic further and turn on expires headers so browser
when it comes to rendering. With the new modular caching could be turned up to a month or more.
JavaScript movement, it is also possible to call Julio Cesar Ody: JavaScript is fast and
Backbone.js monolithic in size. There isn’t any reason browsers are pretty damned efficient these days and
why Models, Collections, Routers, and Views should increasingly becoming more so. It does take some
be packaged together into one library; alternatives serious messing up for things to end up really slow.
such as Components.js are writing those parts as That said, performance is everything when it
individual modules. This hasn’t actually been done comes to good UX. But the JavaScript side of things is
fully at the moment and I’m considering it for one of just one part of that. How you use CSS (and transitions,
my next projects. animations), how good and thin the markup is – all
that also has a big impact on performance. You need
to be mindful about the whole.
If any of you did any microcontroller
Building faster, more robust front ends is nice but programming in C, perhaps you know what it means
what about performance, especially on mobile? to write programs that run on constrained devices.
Although phones are rather powerful computers,
they’re still significantly slower than the average
Igor Minar: I think mobile is still underserved laptop. You can’t afford to make as many mistakes,
for web development. A lot more focus needs to be and you need to take the rule I mentioned before
placed here and AngularJS is definitely refocusing on and be twice as careful.
mobile in its 2.0 version. Measuring problems helps a lot. Chrome
Julien Knebel: Ember.js is heavier than others – DevTools comes to mind.
it’s a fact, even if you minify/gzip it. This is important Thomas Davis: There is no silver bullet for
to consider especially if you plan to build mobile web choosing a front-end-development approach
apps. Then, dealing with smooth 60-FPS transitions between mobile and desktop at the moment.
is tough:; either you implement them with Ember. Sometimes native apps are better, sometimes
js or another one. I’d say that you need to know JavaScript apps are, and sometimes server-generated
how to deal with common rendering performance pages. Though for performance questions related to
issues, otherwise you’ll get in trouble no matter what the DOM in general, I’d probably make a safe bet on
framework you choose. React paving the way. React implements a virtual
Brad Dunbar: Backbone.js is rather performant DOM that diffs the browser’s DOM and only makes
and small compared to others. I haven’t had any changes when necessary for high-performance
issues using it for mobile, though I usually don’t write rendering. Because it’s a virtual DOM, you can
for devices more than one generation old. also render DOMs on the server and access them
John Munsch: We haven’t really focused on programmatically.
mobile yet for my current site, but we definitely did

16 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

 RequireJS gives a rock-solid implementation of AMD
What is your typical workflow using your and in my experience makes debugging the easiest
framework of choice? What tools do you use to of all languages and environments. Not only does it
develop and debug? help you structure your code intelligently but it also
makes the barrier to entry of your codebase very
Igor Minar: WebStorm, Karma, Chrome. low because everything has to be a dependency
Julien Knebel: I use Grunt as my build tool to referenced by a file path.
preprocess, precompile, post-process, concatenate,
minify, etc. Then TextMate 2 has been my IDE of
choice for years. I also spend a huge amount of time
in Chrome DevTools debugging with breakpoints As applications grow bigger, it can be a challenge
and debuggers. And of course I couldn’t live without to keep a robust architecture and maintain
Git. a large codebase. How does your favorite
Brad Dunbar: I tend to use a somewhat JavaScript framework scale? How does it scale as
minimalist setup including a CLI and vim/node/npm. development teams become bigger and different
Lately, I’ve enjoyed using Browserify for bundling. As people need to work on different parts of the
for workflow, I do the typical code, refresh, debug functionality?
cycle. I’ve never been a huge proponent of test-first
or anything of that nature. Igor Minar: Code reuse, reduction of boilerplate
John Munsch: Most of the developers on the and style guide, and conventions are important for
front-end team use WebStorm or Sublime on Macs. reducing complexity of large codebases. But in our
The project as a whole is built and run via Maven real-world experience, we’ve seen that high-quality
because the back end is Java, and we recently started test suites have even higher impact because they
running Grunt from within our Maven builds to get allow for major refactoring while keeping the risk
optimizations on front-end code. Jenkins is used to low. And refactoring is a key to keeping the codebase
build, run unit tests, and deploy to various testing clean.
environments and production. Matteo Pagliazzi: Besides the complexity (like
Local developers run Karma in the background the presence of Services, Factories, and Providers,
to run the AngularJS unit tests we have (sadly only which is very confusing), what I personally don’t like
30% code coverage today). is the dirty-checking mechanism AngularJS uses
Julio Cesar Ody: I do as much of the design as to see which properties have changed and update
I can (when I’m the one doing it) up front. Looking the view accordingly (but with simplicity a goal of
at how the page will look like helps me do a mental AngularJS 2.0, this is going away as Object.observe
breakdown of the components I’ll need to write. is implemented natively, allowing for notifications to
I’ve used Hopla, which I
wrote myself, a lot recently as a
build tool. It uses Sprockets for
transpiling CoffeeScript and SASS,
and compiles the application to
static HTML/CSS/JS. This comes in
handy for deployments, and even
for building PhoneGap apps.
Then I start implementing a
design usually by writing a static
HTML page with styles using SCSS,
going through each part of it later
and replacing it with JavaScript
components.
Thomas Davis: Honestly,
I’m pretty indifferent to how
people like to develop and debug,
and my methodologies change
on a per-project basis. The only
advice I dogmatically give is that
developers use Asynchronous
Module Definition (AMD).

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 17

be issued upon change instead of having to check Thomas Davis: As long as you use a modular
for every property’s changes). JavaScript framework such as RequireJS, scaling
To wrap up, AngularJS is really great, backed by and maintaining your codebase is a walk in the
an awesome community and an enormous number park and will only depend on your coding practices.
of external libraries that usually satisfy every need – Though, Backbone.js does need to be split into its
and if you don’t find what you need, you can always own modules at this point so instead of requiring
write your own directive. But it is also full of complex Backbone as a dependency, you would only require
concepts that take time to understand. Backbone.Model, for example.
Julien Knebel: Ember.js deals really well with
growing codebases because of its enforced good
practices and its strong conventions, which let you do
a lot with single lines of code (a.k.a. convention over What common pitfalls would a team that is
configuration). It helps each member of the team only now considering adopting a JavaScript
debug others’ code faster. I saw some developers framework have to worry about?
getting angry because they felt constrained to code
how Ember.js wanted them to code, but I guess the
real frustration came from the fact that you first have Matteo Pagliazzi: Working on a big open-
to understand/learn Ember.js before trying to do source project that uses AngularJS as the client-side
fancy stuff with it. And I do believe that this extra framework, I found that developers without much
education is time really worth it in the long term. experience easily incur problems with inheritance or
Plus, I tend to trust Yehuda Katz and Tom Dale’s work start polluting the $scope and $rootScope with a lot
a lot (but this is not really objective, I guess). of objects that at a certain point will start to slow the
Brad Dunbar: I think large JavaScript codebases application and grow the RAM used by the browser
are challenging regardless of the framework used. (we easily use 300+ MB and it can easily get to 1 GB
It comes down to the team maintaining a set of with an even small memory leak). The fact that it’s
guidelines and sticking to them. Use of modules of made data binding simpler is of course fantastic but
some kind (I mentioned I like npm and Browserify) you have to understand that it will not always work
helps tremendously though. as you want just because it’s magic.
John Munsch: So far, our experiences with Julien Knebel: All those MV* frameworks
scaling are good. Front-end JS scales well because are heavy JavaScript calculations on the front end,
there are lots of static files amenable to optimization, therefore if your app needs to print a large amount of
caching, and even CDNs. Pretty much the only data to the user, you’ll quickly hit your performance
bad experiences have been with trying to render budget (talking about the 60-FPS budget). You’ll
thousands of items worth of data on pages. We’ve have to deal with pagination, intelligent scrolling,
tried to encourage the use of pagination and other wisely dosed CSS decorations, subtle sequencing,
workarounds but we can’t always get agreement choose where to display spinners, choose when to
to use them and large chunks of data generating let network calls retrieve data, etc. Eventually, all that
thousands of DOM elements is a recipe for problems stuff will matter a lot.
on old browsers. Brad Dunbar: I think the most common issues
Other problems have actually completely gone come before you’ve even dug into the framework.
away. For example, AngularJS’s default behavior of Your client needs tests, modules, a package manager,
discarding views and controllers when switching and continuous integration just like a server. If you
between views keeps memory usage of another can stay true to those, you’ll probably be all right.
view from impacting the present view. That’s a John Munsch: I’ve mentioned the problems we
simple solution that helps developers avoid a lot of had with Backbone.js, but there are some common
problems as they add more and more functionality things that can always come up. For example, SEO is
to a single-page app. a factor for pages generated entirely via JavaScript
Julio Cesar Ody: I don’t think any of the popular on the front end. I’ve been fortunate that most of
frameworks has a defined scaling path. It’s up to the my work has been SaaS so SEO hasn’t been anything
developer to think of something sane and run with it. we’ve cared much about, but if you’re building
I’ve always liked the concept of components/ something for the wider Web, you need to look at
modules. It lets me think of writing programs much solutions like Prerender.io, BromBone, etc. to see
like building a watch. Each part (or component) has how you’re going to deal with that. Google Analytics
its purpose, and needs to work as independently as can present similar problems. None of these are
possible, exposing a small surface area that other unsolvable, but it’s good to go in knowing that there
components can interact with. are some issues and you may need to pick a solution.

18 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

 For us, without a doubt, IE8 has been one of
our biggest problems. It’s the last browser with a
THE FUNDAMENTAL
significant chunk of market share out there that does
not have a built-in JavaScript just-in-time compiler. PROBLEM I LOOK FOR ANY
As a result, JavaScript-heavy front ends can be slow
at times, can trigger “unresponsive script” errors
when displaying lots of data, etc. The sooner the
FRONT-END FRAMEWORK
Lovecraftian horror that is IE8 goes away, the better
for all of us. TO SOLVE IS TO GIVE
Julio Cesar Ody: The learning curve is definitely
the biggest problem I see. Most people have been
developing web apps for years, which consist of a
ME SOMETHING WITH
server component processing requests and sending
HTML back to the browser. SUFFICIENT BONES,
This is a completely different paradigm which
resembles network programming (client/server)
a lot, and that’s not something many have done
MUSCLE, AND CONNECTIVE
before. It has many of the same problems network
programming has, and having a background in it TISSUE TO HELP ME BUILD A
COMPLEX UI
surely helps.
Thomas Davis: The only major pitfall to
really worry about is not having server-generated
content available at the URL. This of course stops
search engines from being able to directorize your Smashing Magazine (when Ember.js 1.0 came out)
website and you will also encounter problems with that, in my humble opinion, is still very relevant.
sharing your page. A lot of social networks now Brad Dunbar: It’s maybe not the coolest thing
try to parse your website when users share so that to point out, but I always recommend reading the
they can bring down extra information. If you don’t source. That’s where the action is and if it’s a mess,
have content generated at server time, these share you’ll know it. You’ll become very familiar with your
attempts will fail. Though this problem has been choice of MVC framework so if you can’t stomach the
solved many times and I recommend prerender.io as source you may as well hang it up.
nice open source solution, I have also written SEO John Munsch: If the person in question is
server libraries to mitigate this problem. Though the already familiar with JavaScript, I would recommend
search-engine giants should really take it into their picking a small project (four or fewer distinct views
own hands to render your single-page applications making up a web app) and implementing that entire
for content. Some people speculate the entire project using the framework in question. Building
Chromium project is an attempt by Google to be able something, even something very simple, all the way
to load and execute all pages so that they can tie it to completion and actually deploying it for use is
into Googlebot and directorize all content rendered very different from playing with a framework. You
by JavaScript. are forced to solve some specific problems and really
start to understand some things that are otherwise
easy to skip because they may not be the fun parts
of learning it.
What would be the fastest and most efficient Julio Cesar Ody: Make as many mistakes as you
learning path for someone that wants to start can in pet projects, but be extra mindful about them.
working with the framework? Any resources By that, I mean it’s futile to try and nail everything in
you’d like to recommend? the best possible way right off the bat, and it won’t
help you get there faster.
Igor Minar: There are several good books on Then refactor your own code over and over,
AngularJS, newsletters like ng-newsletter.com, and keeping in mind that you’re looking for a scenario
many great podcasts at egghead.io. where you’re putting a bunch of components to
Julien Knebel: The official guides at emberjs. work together to become a full application, and you
com are tremendous; every single one of them targets need to keep them as independent as possible.
a specific feature of the framework. Otherwise, I I’ve written a free booklet on this, with an
wrote an in-depth introduction for beginners for emphasis on Backbone.js, which of course I’ll
recommend.

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 19

 Thomas Davis: It depends on your learning in JavaScript so we can’t use a common library of
style. I generally prefer to just jump in and start code to do the validation and we get to build two
hacking away. I have received amazing feedback sets of the same code in different languages and give
on my video tutorial for Backbone.js, which can be ourselves twice the likelihood of making a mistake in
found on YouTube. some edge case.
Why not let me describe the data with a JSON
Schema and then make it easy for me to use that for
validation on both sides of the API call? I would like
Now that MVC frameworks have become to see that made easy.
mainstream, how do you think they need evolve No Back End
in order to better fulfill developer needs? For There was some buzz about this last year as a term
example, what features do you think they’re still of art (for example, nobackend.org) but that’s kind
missing? of died down. But the idea itself still seems to be
going strong with Firebase, Hoodie, Backendless,
Igor Minar: Mobile, testability, mobile. etc. I think it’s a great way for some developers only
Julien Knebel: Real-time data synchronized familiar with front-end work to have a way to do a
between the back end and multiple clients would be complete app without needing help from someone
the next logical step. Meteor seems to go this way so to do the back end. But even for someone like me
I’ll surely give it a try soon. who could comfortably build the front and back-
Brad Dunbar: I’m not sure about this one. I end of an application, it provides an easy way to
tend to submit patches for things I think Backbone.js prototype an idea or get to an MVP.
needs and not all of them are good. :) Julio Cesar Ody: It’s hard to say. I think a lot
John Munsch: The easiest answer is that of ideas are borne out of misconceptions about
something like the usage numbers at Angular modularity, for one, so the “more features” mindset is
Modules tells you some of the solutions that one I’ve historically fought in the past.
developers end up having to seek out over and But I think React has the right idea about it, in
over – anything that ties the front-end framework to that it gives you a component-driven approach to
HTML/CSS frameworks (like Bootstrap), file upload, building apps, and it’s hard to do anything terribly
internationalization and localization, etc. If hundreds wrong if you just follow the examples. It also abstracts
of developers have had to go find it and then took some hard problems such as DOM performance and
the time to mark on a website that they use it, you it pretty much gives you that for free.
can bet that thousands more also use it but never That’s the kind of problem no one wants to
bothered to share that fact. That’s the easy answer, spend any time solving in the course of building an
but I’d actually plug two things I don’t think get the application, so that’s a step in the right direction.
love they ought to: validation and no back end. Thomas Davis: Client-side tooling and MVCs
Validation are making fast progress in the right direction. I
Client-side validation is usually wanted and for some actually believe that server APIs are lagging behind
pages can be very complex. We have pages where at this point. There is no real convention that people
many dates need to be tested against each other to are following when it comes to building RESTful
make sure they occur in the correct sequence, and APIs, which makes it difficult for client-side models
many other variables have various constraints as and collections to bring down data efficiently. Error
well. Then we send them up via an API call to the logging on the client side still needs some work but
server, which turns around and tries to do the same attempts such as Track:js are making progress there.
stringent validation because you can never rely on How events are handled on the client side could also
validation client-side. Our back end is not written use some work.

20 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

Q&A
READ ONLINE ON InfoQ

Matthew Carver on The Responsive Web

by David Iffland
Matthew Carver is a front-end developer and web designer with real-world experience in
responsive design for clients like American Airlines, the Dallas Morning News, and Chobani
Yogurt.

In his book The Responsive Web, Matthew Carver provides an accessible

introduction to modern web design and the importance of responsive design.

The book is divided into three sections. The first wraps up with practical advice on testing a design
section provides a brief introduction to responsive and optimizing it for performance.
design, why it exists, and some of the features of InfoQ spoke with Matthew about his book and
modern web browsers that enable the responsive the challenges facing the modern web developer.
Web to exist. It also makes the case for designing
mobile-first: designing sites for a mobile-device
breakpoint before moving on to a desktop design.
The second section goes into the how of Modern developers face incredible challenges
designing for a responsive web. Matthew offers with myriad browsers and devices. What advice
information on how to present ideas to clients before can you give to developers struggling to keep up?
writing any code. Using navigation as a talking point,
he introduces design patterns and the thoughts
behind building responsively. The book goes on First of all, I would say keep at it. I think the state of
to cover some of the fundamentals of responsive “struggling to keep up” is common among passionate
design and techniques for presenting information, developers. Our industry moves way too fast for
such as web typography. anyone to truly live on the bleeding edge without
In the final section, Matthew introduces more having a very focused, niche practice. If you feel like
advanced techniques as effective solutions to you’re struggling to keep up, then you’re likely doing
problems that various browsers present. The book your job pretty well.

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 21

 I THINK THE STATE OF solve more and more real-world problems, so when
you set out with a site build, sometimes you’re not

"STRUGGLING TO KEEP UP" IS sure where you’ll end up. Having a framework like
Foundation in place offers a prefabricated solution
that frees you up from solving an immediate problem
COMMON AMONG PASSIONATE like “What do buttons look like on the site” and lets
you move into more complex problems such as “Is

DEVELOPERS. OUR INDUSTRY there a better way to implement this button?” I still
end up customizing 70-80% of the framework, but
using Foundation or Bootstrap as a starting point
MOVES WAY TOO FAST FOR saves a ton of time.

ANYONE TO TRULY LIVE ON

THE BLEEDING EDGE WITHOUT What do you say to critics who say that responsive
design causes bandwidth and memory issues on
mobile?
HAVING A VERY FOCUSED,
NICHE PRACTICE.
I think that’s a valid criticism in a sense. The simple
fact of the matter is that in web development, there
has never been a large-scale solution offered that
hasn’t in one way or another been controversial. Has
Secondly, there’s so many great ways to there ever been a solution to a web-development
emulate devices and browsers. It would be great to problem that wasn’t followed by a swarm of critics?
have a fully stocked device lab with all the up-to- Look at Swift right now. Apple has more cash
date tablets and mobile phones, but it’s simply not a reserves than some countries and has spent years
reality for a lot of developers. Luckily, there are some building a language to improve iOS development
alternatives. and immediately there’s criticism over how well it
Chrome offers in its developer tools a sort compiles. Face it: as developers, we’re a critical lot,
of emulator that frames the viewport relative to and if you want to know how failing to embrace
a device’s size, so you can choose to emulate the change works out online, go talk to a Flash developer.
screen size of any number of devices. It’ll also spoof Bandwidth and memory exist in a budget
things like touch controls so you can get a pretty and in order to accomplish tasks you must spend
good sense of what to expect in mobile and tablet that budget. Developers might overspend in those
browsers right in Chrome. Installing the Android SDK budgets for myriad reasons but it’s not a valid reason
will install the official emulator, and Xcode comes to dismiss responsive design as a whole. That’s just
with an emulator for iOS devices. silly. There’s this old saying, “A shoddy carpenter
blames his tools.” Responsive design is a tool to
solving the problem of device parity on the Web.
Device fragmentation is a reality on the Web and
What are your thoughts on frameworks such as just because responsive design isn’t perfect doesn’t
Foundation or Bootstrap? Where do they fit into mean it’s worth abandoning.
the developer’s toolbox?

I was pretty soft on them previously. In The Integrated browser tools (like F12, etc.) continue
Responsive Web, I discuss Foundation in detail and to advance in functionality and complexity. What
offer it as a great prototyping tool, but recently improvement excites you the most about these
I’ve been experimenting with it in production tools? What parts are most useful to responsive
environments. The most common argument against devs?
these frameworks is that they can be bloated or
restrictive to the design. I feel like they represent a I think the movement to build tools is pretty
real need in the process. though. incredible, still. I know it’s a little old hat, but Gulp
Site builds are getting more and more complex and Grunt have made the development process so
as we stretch our legs and start using the Web to much more efficient, by leaps and bounds. Compass’s

22 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

ability to generate sprites on the fly is incredible that a designer could read and come away from
and tools like LiveReload make the whole front-end empathizing with the challenges of a developer, and
development process faster. that a developer could read and empathize with the
challenges of design. I care deeply about the Web
and I believe passionately that we can use the Web to
make lives better but that can only happen if we first
How will we see the responsive Web change in the develop systems to solve problems and make these
future? solutions usable for average people.
A great developer might can come up with
a great new way to search for homes to buy that
That’s a hard question. In the appendix of The cuts costs dramatically but if it relies entirely on
Responsive Web, I have a chapter on what I call a command-line interface, does it do anyone any
“context-aware design”. This idea, that an interface good? Alternatively, a designer might come up with
should adapt deeply to a user’s environment and a beautiful interface pattern but if the software
patterns, is something that I found was already under it doesn’t work, who cares? We need people
being discussed at Code and Theory as a “responsive with these skills to communicate for things to move
philosophy”. Just that fact that this same concept forward and I hope my book can help that to some
was cropping up independently of each of us both degree.
looking at the same problem proves to me that
there’s something there.
I think we have all the tools in place to offer
a deeper connection to UI for web users that How do you think responsive design has impacted
incorporates their personal preference, environment, the work done by today’s web developers?
time, and personality into interface design.

I think it’s inside of every function on the process.

You can’t ignore users’ device preferences and I
What are your thoughts on tools like Macaw and think responsive design has found its place in the
Brackets for designing and coding? development workflow. To me, it’s the default process
and I find myself having to justify not including
responsive layouts by default.
They are great. I don’t know that I would use either
in production at the moment, but any tool that Note: Save 40% on The Responsive Web with
helps expose designers to the fluctuations in space discount code info40rwd at manning.com. The code
that are common in responsive design is great. The is active and will not expire.
ability to manipulate and move
the drawing space in a design
helps designers articulate their
ideas closer to the literal browser.
I find more and more arguments
towards designers using a more
fragmented tool set, instead of
the one application to rule them
all approach of Photoshop.

What was your main motivation

for writing the book?

I wanted to create something to

resolve what I saw as the biggest
issue in modern web design:
collaboration between disciplines.
My hope was to write something

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 23

 READ ONLINE ON InfoQ

TOWARDS A RESOLUTION
Independent Web with SVG

Angelos Chaidas is currently the senior front-end developer at Adzuna, the international job
search engine. He started his career in 2000 as a designer and full-stack PHP developer but
has focused on front-end and JavaScript development for the last eight years. He loves mobile
UX and UI design, is passionate about web optimisation and has spoken at local JavaScript
events. You’ll find his random Twitter thoughts at @chaidas.

There are advantages to using Scalable Vector Graphics (SVG) as the preferred
format for the graphic assets of any web or mobile web project.
The aim here is not to deter designers and developers from the proven
method of using raster formats (PNG/JPEG) but rather to showcase how
using SVG can enhance the workflow of the two main lifecycles of any
web project: the design and the development stages.
Design turning flat - both approaches easily implemented
Ideal for resolution-independent user-interface icons with HTML elements styled with CSS - the focus of
At the time of this writing (October 2014), UI design is moving towards typography, layout, and
flat design is an unavoidable meme. Microsoft is icons.
applying its modern design principles to all software The main advantage of SVG, rightfully
as well as mobile-device user interfaces. With the advertised all over the Web, is its scalable nature.
advent of iOS 7, Apple masterfully substituted their When preparing an icon, a designer can stop worrying
clever skeuomorphic principles in favour of clear about how it will look in different dimensions or on
guidelines for flat design. Not to be left behind, mobile devices with different pixel densities and
Google is pushing for its “material design” visual focus solely on making the asset look great.
language to be used everywhere, from Android apps With SVG, there is no need to export two different
to websites. (Image 1) raster assets for high-resolution and lesser-resolution
With complex, pseudo-3-D UI backgrounds displays. As a matter of fact, there’s no need to worry
evolving into primitive colours and sculpted buttons at all about the pixel density of any device, especially

24 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

 Image 1 / The flattening of design: glows, drop shadows, and pseudo-3D skeuomorphism are evolving into simple shapes.

Image 2 / The SVG asset can be scaled at whim by the developer with no loss of quality. There’s no need to export @2x (or @3x)
versions of an asset, resulting in one less step in the designer’s workflow.

given the (sometimes absurd) non-standardised up drawing from scratch the smaller image assets
nature of it, but focus rather on the artwork itself. (interface icons, favicons, etc.) to achieve clarity.
Once an icon is ready, the designer exports a single With SVG, the above scenario is partially
SVG file - directly from Illustrator - that can be resized mitigated by the fact that browsers scale (and
at whim by the developer with no loss of quality. consequently rasterize) SVG assets very well. This is
(Image 2) especially true for higher display densities such as
the latest generation of mobile devices. (Image 3)
Browser scaling is getting better and For optimal results in these dimensions, a
better, even on small dimensions designer can easily package all SVG assets into an
There’s a common design challenge for the slightly- icon font (see below for more details) and thus
more-obsessive-compulsive-than-normal designer: leverage the sub-pixel hinting capabilities of the
in Photoshop, an icon might look great in the finger- various operating systems, resulting in icons sized at
friendly dimensions of 44x44 pixels, but resize it 12 or 14 or 16 pixels that look crystal clear and razor
to 24x24 or 16x16 and the bicubic interpolation sharp, even on old IE browsers.
introduces anti-aliasing artefacts which might result SVG elements can be crafted to reduce
in a blurry image. Even with clever algorithms such complexity and file size
as the sharp bicubic interpolation available in the Optimizing a JPEG image is a one-way process
latest versions of Photoshop, many designers end of reducing quality while trying not to lose too much

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 25

 Image 3 / Browser scaling is getting better. In certain cases, the browser scaling ends up looking even
better than the advanced interpolation methods of Photoshop.

information. For PNG and GIF assets, the designer and the asset dimensions specified in the CSS file, a
has slightly more control due to the ability to specify developer has full creative control when it comes to
a restricted palette and thus reduce the information resizing the asset without the need to push back to
encoded in the file. the designer for variations of the same file.
With SVG, the meticulous designer can opt to There is something exhilarating in the fact
use primitive shapes, reduce the number of vertices that a single file (e.g. company-logo.svg) can be
in the shape elements, and have text embedded used in various places on a user interface, with the
inside the SVG instead of converted to outlines, all dimensions of each instance controlled by CSS or
of which can result in a less complex and smaller SVG width/height attributes, and having the resulting
file. (Image 4) assets look crystal clear irrespective of how much
For even more optimization, a designer each is scaled (or rotated).
can remove extraneous SVG properties such as
comments, IDs, or redundant grouping tags (<g>) by Animation
directly editing the SVG code. An SVG animated with CSS3 retains sharpness and
clarity throughout the animation duration. A couple
Better open-source tools of examples are shown below but please note that
Instead of Photoshop (and perhaps Fireworks or the low frame rate of the animated GIF does not do
Sketch), the open-source world offers the Gimp editor. justice to the GPU-accelerated smoothness of the
Gimp is a valuable tool with a vibrant community, yet finished effect:
it is inferior to any of the aforementioned pieces of But that is only the beginning. The structured
software in several areas. Substituting Photoshop XML syntax of SVG enables a developer to
with Gimp is not an easy task, and it usually results in programmatically select and animate each
a convoluted workflow. individual element of an SVG file to create scripted
For vector artwork however, Inkscape is a animations, banners, ads, etc. CSS-Tricks has
professional-grade open-source alternative to Adobe an excellent step-by-step tutorial for creating an
Illustrator that enables designers to create and edit animated banner in SVG format, and showcases
vectors with a plethora of tools and procedures, how, when placed inline, individual elements of an
similar to what they are used to with Adobe’s SVG image can be manipulated with CSS to follow a
offering. Many of the everyday actions of working certain script, resulting in an animated banner similar
with vectors can be done in Inkscape as well, such to those on the Web when Flash was the industry
as Boolean operations to combine shapes, path standard for animated advertisements.
simplification, dynamic offsetting of paths, editing
subpaths and much more. Interactivity
The potential of SVG as a replacement to Flash
Developers does not stop with animation. SVG content can
Resolution independence and reusability be interactive, with events such as click, mousedown,
For screens with higher pixel densities such as and mouseup (plus a few interesting ones such as
Retina displays and mobile devices, the need for @2x SVGZoom and SVGResize) available to the developer
high-res assets goes away. With proper meta tags

26 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

 Image 4 / Illustrator’s “Simplify” in action. The vertices that make up a vector path can be reduced with minimal loss
of precision, resulting in a smaller SVG file.

Image 5 / For a live demonstration, visit the Adzuna homepage and focus on the text fields, or click the “More”
links in the bottom lists.

to programmatically listen for and respond to, using With HTML5, the <svg> element can be placed
JavaScript. directly into the source HTML of the page. The
This opens up possibilities such as interactive advantage here is that the <svg> element, as well as
infographics and enterprise-strength charting its children elements, can be controlled with CSS.
solutions. Apart from size and position, designers can
Going further, the developer can use helper also manipulate fill and stroke colours, and can even
libraries that facilitate drawing, manipulation, create an animation. Furthermore, certain SVG-only
and interactivity, with some of the top candidates attributes (such as stroke-dasharray and stroke-
being Raphael, D3.js, and Snap.svg. With libraries dashoffset) can be manipulated from within the CSS
like these, complex animated and/or interactive file to result in interesting possibilities for animation
presentations that previously could only work such as this line animation.
through Flash are now possible, with several
examples available for inspiration, from the New York More ways to sprite
Times’s custom tree structure for political analysis With raster assets, a classic optimisation approach
of the Obama/Romney campaigns to Hamiltonian for reducing HTTP requests is to combine several
graphs, force-directed graphs, zooming interactive images into a single sprite (usually PNG) and use the
maps from the Argentina Census, and countless background CSS property to style several different
more. HTML elements with that one sprite.
With SVG assets, two extra possibilities become
Inline use available to developers: inline grouping and
The two standard approaches to using image assets packaging in an icon font.
on a web project are by means of an <img> tag, With inline placement, the ability to control the
and as background images for (usually block-level) display of sub-elements with CSS enables a developer
elements. Since SVG is XML, a third possibility is now to create an SVG “bucket” of assets, with each group
available to developers: inline use. being an element such as an icon. The developer can
assign IDs to individual groups, and by changing

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 27

 Image 6 / SVG code can be placed directly into the HTML. Older browsers will simply ignore it and newer browsers will
render the vector asset, which is now reachable by CSS (#wa_i) and JavaScript (document.getElementById(‘wa_i’)).

the display property of each group chooses what to address. Combining this requirement with the fact
hide and what to show. This technique works really that pre-v3 Android Browsers lack support for SVG
well with interface elements that have the same means that a fallback solution must be implemented.
dimensions, such as the icons for a user interface. For developers, Modernizr is the tool of choice.
A developer also has the option to package Including the Modernizr library as an external
several SVG assets together in an icon font. Browser <script> in the <head> of any web project will add
support is excellent (even IE6) and the sub-pixel the appropriate classes to the <html> element of
hinting engines of modern browsers make even said document on page load. It is then a matter of
small sizes look crystal clear and sharp. Even better, adding a few extra definitions to the CSS to replace
multiple online icon-font generators make the background SVG images with raster fallbacks or, in
(somewhat annoying) packaging process a breeze. the case of inline SVGs or SVGs placed in <img> tags,
showing helper tags that contain the raster fallbacks
Comparing versions of the same asset and are by default hidden.
The SVG format, by virtue of being essentially a text The challenge here is to not have to push
file, presents the developer with the interesting back to the designer to export fallback assets since
possibility of not only comparing an asset visually, this invalidates their “export only one SVG asset”
but also doing a file diff to establish which parts of advantage mentioned above.
the SVG have changed. Fortunately, automation tools such as Grunt
In the case of large and complex SVG files, and specifically Filament Group’s Grunticon are here
such as an infographic, text comparison is great in to help. In short, Grunticon operates on a folder of
establishing what parts of the asset have changed in SVG assets and outputs a list of fallback PNG files
a newer version. along with a fallback CSS file that references these
PNG images. For command-line gurus, Inkscape can
Further reading be used as part of a shell script to also convert SVG
This author’s personal preference for development files to any format.
is Chris Coyier’s (of CSS-Tricks fame) Compendium
of SVG Information as well as monitoring any SVG- Summary
related articles that the brilliant Sara Soueidan comes The advantages of using vector graphics on the Web
up with. The compendium, a huge list of links to SVG are now more numerous than the disadvantages.
resources split by logical sections, is the definitive With excellent browser support and automated
starting point for anyone interested in SVG. fallback solutions to support older browsers, it is
For designers, Todd Parker’s massive “Leaving this author’s belief that future-proofing a UI with
Pixels Behind” presentations are the best possible resolution-independent vector graphics is the way
introduction, packed with animated GIFs that to go forward.
showcase the workflow from Illustrator to SVG.

Falling back for older browsers

As of October 2013, Internet Explorer 8 is still,
unfortunately, something developers need to

28 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 29
 READ ONLINE ON InfoQ

React in Real Life at Codecademy

Bonnie Eisenman is a software engineer at Codecademy.com. A recent Princeton CS

graduate, she also has a bit of a hardware habit and enjoys working with Arduinos and
musical programming in her spare time. Find her as @brindelle on Twitter.

In August 2014, Codecademy decided to adopt React, Facebook’s library for

writing JavaScript UIs, as part of an overhaul of our learning environment.
Initially, we ran into issues finding examples of how React could apply to
an application as complex as ours, given that most tutorials focus on the
specifics of toy-sized demo apps as opposed to more general discussions of
the problems specific to larger applications.

What is React? React handles the DOM for you.

React is a library for building user interfaces with DOM manipulation is expensive. React’s appeal
JavaScript. Instead of the usual approach to writing comes largely from the way it solves this problem.
user interfaces, React treats each UI element as a React minimizes the amount of DOM manipulation
contained state machine. It is not a framework in the by maintaining its own virtual DOM and only re-
sense of something like AngularJS. Though Facebook rendering when necessary, a feat enabled by its
sometimes describes React as “the V in MVC,” I find high-performance diff implementation.
this description less helpful, since React applications This means that you will rarely touch the DOM
needn’t abide by the MVC model. React helps you directly; instead, React handles DOM manipulation
build fast user interfaces that can handle complex on your behalf. This feature is the basis for much
interactions without a lot of ugly code. of React’s design. If you feel like you’re abusing the
If you’re going to be working in React, you React API or attempting to hack your way around
should be aware of these features:

30 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

 Figure 1: The learning environment.

Figure 2: The learning environment and related components.

it, chances are you’re interfering with React’s machines. This model encourages building modular
understanding of the DOM. UIs and, in practice, makes it easier to work with and
This feature also enables built-in server-side reason about your UI.
rendering using Node.js, which allows you to easily
serve SEO-friendly webpages. React marries markup to JavaScript.
Though it may feel strange to write HTML in your
React thinks declaratively, in Components. JavaScript, in React it’s the natural way to do things.
In React, everything must subclass the Component Using JSX – plain JavaScript mixed with HTML – is
class. Components have properties (determined optional but I highly recommend it. React argues,
by their parent) and state (which they can change and I agree, that since your markup is tightly coupled
themselves, perhaps based on user actions). to the JavaScript that controls it, they may as well live
Components should render and behave based solely in the same file.
on their state and properties; components are state

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 31

Information flows in one direction.
This is more of a general React pattern than a strict
rule. Information flow tends to be unidirectional
in React. We’ll revisit this pattern later as we begin
considering how information flow needs to be
handled in larger applications.

Anatomy of a React application

To make these principles more concrete, let’s look
at how React works for the Codecademy learning
environment. (Figure 1)
As you can see from the screenshots, the
main learning environment consists of many
different UI elements. Some, like the header, menu,
and navigation, are present at all times. However,
depending on the exercise, some components
appear and disappear – the web browser, command
line, and code editor can be mixed and matched
depending on the lesson.
The logical solution is to create React
components for the various pieces. In the screenshot
below, I’ve highlighted our main React components:
(Figure 2)
Each component also may contain a number Figure 3: The sub-components that comprise the Lesson component
of child components; for instance, the lesson panel
on the left is actually composed of a number of • The CodeEditor then informs its parent, the
components: (Figure 3) Learning Environment, through another
In this case, we use React to determine what callback, passing along the user’s current code.
appears in the lesson panel. For example: • The LearningEnvironment runs tests against the
• Only show the “Report a Problem” button if the user’s code.
user is signed in. Based on the result:
• Only render the Instructions section if this • The LearningEnvironment sets the errorMessage
exercise has tests. prop on the CodeEditor, which then sets
Furthermore, React handles information flow the errorMessage prop on its child, the
between this component and others. There’s a parent ErrorDisplayer.
component for the entire learning environment, • If the user has passed all tests for this exercise,
which keeps track of state such as what exercise the LearningEnvironment sets the progress prop
the user is on. This parent component dictates how on the Navigation component.
its children should render by setting their props The updates to the UI can be performed with a
(properties). single function call. If our components are declared
Now let’s look at an example of component like this in the LearningEnvironment’s render method
communication, using the following components in (again, with much simplification):
this much-simplified component tree:
001 render: function() {
• LearningEnvironment
002 return(
• CodeEditor 003 <div>
• RunButton 004 <CodeEditor
• ErrorDisplayer 005 error={this.state.error}
• Navigation 006 />
(Figure 4) 007 <Navigation
How do we handle the workflow of users trying 008 mayProceed={this.state.
to run their code? We want to run tests against their mayProceed}
code and either display an error message or allow 009 />
them to proceed. Here’s one possible flow: 010 </div>);
• When the user clicks on the RunButton, it 011 }
informs its parent, the CodeEditor, of the action Remember, React mixes JavaScript with HTML.
via callback. In this case, the render method is defining

32 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

 Figure 4: Some of the components involved in code submission.

a LearningEnvironment as something that contains should the Run button communicate user actions to
both a CodeEditor and a Navigation component. the LearningEnvironment? We need to pass callbacks
We can update the LearningEnvironment’s around, but it’s hard to write truly modular, reusable
state, which will trigger a re-render and update child components that way.
components as necessary: Codecademy’s solution has been to generate
001 handleTestResult: communication adapters that manage information
function(currentIndex, passing, flow between specific components. Instead of
error) { passing callbacks, high-level components such as the
002 this.setState({ CodeEditor also receive an Adapter, which provides
003 error: error, a single interface for important communication
004 mayProceed: passing && tasks. For example, when the CodeEditor is present,
currentIndex === this.state. the LearningEnvironment will generate an Adapter
currentExercise.tests.length-1 which can emit and process events related to code
005 }); submission.
006 }
This approach isn’t without its pitfalls, and I
That’s it. React updates the UI for us gracefully and spoke about this at greater length at React.js Conf.
simply. The main takeaway that I’ve had is that, regardless
of how you handle information flow up the
Considerations for larger applications component tree, your team ought to agree on a
coherent strategy.
Information flow
As I noted earlier, React doesn’t necessarily adhere to a Integration
MVC model; in fact, you’re free to handle information React is easy to get started with, but it does require
flow however you’d like, but you’ll need a conscious some tooling to use effectively in your workflow. For
strategy for information. Do you want to pass down example, we use:
chains of props to components that don’t actually • a script that watches for local changes to .jsx
need them, just to reach a great-great-great-great- files, and recompiles them as necessary;
grandchild? If that leaf node accepts user input, how • a separate Node.js server that handles server-
does it alert its great-great-great-grandparent to the side rendering; and
change? • developer tools to auto-generate new
In larger applications, this can become component files as needed.
frustrating. Even in the simple example above, how

Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015 33

 None of these are too complicated. Gulp is a and now we use it for nearly all new UI elements. I’d
great choice for the .jsx watcher, though we wrote recommend diving in, building some experiments,
ours in Go. To generate new component files, we and then considering how React might fit in with
use a simple bash script, which also enforces our your existing codebase.
naming conventions. If you’re using a Node.js server
for server-side rendering, beware: it can be difficult Stop worrying about boilerplate.
to force RequireJS to pick up changes to your React Less time spent writing boilerplate code means
code. We have our watcher restart the node server as more time solving interesting problems. From
necessary. this perspective, React is concise and lightweight.
Here’s the minimum code required to create a new
Why React? component:
When we were overhauling our learning 001 var dummyComponent = React.
environment, we had to determine what tools or createClass({
frameworks to make use of. We eventually chose 002 render: function() {
React and are very happy with our choice. (You can 003 return (<div>HTML markup in JS,
find more detail about how we chose a JavaScript what fun!</div>);
framework, or lack thereof, in this talk: https://www. 004 }
youtube.com/watch?v=U5yjPG5mHZ8) 005 });
Here are some of the aspects that we appreciate It’s short and to the point. What’s not to like?
about React:
We have a community to build with.
It’s battle-tested. The React community is growing rapidly. When
React is in production use at Facebook and Instagram, you encounter issues, there are plenty of people
so we can be confident in its performance and to discuss them with. And because many large
reliability. So far, it’s served us well, and we haven’t companies are using React in production (Facebook,
experienced any significant issues. Instagram, Yahoo!, GitHub, and Netflix, to name a
few), we’re in good company.
Components are easy to think about.
Because React deals solely with individual In summary
components, which render based on their internal React is a lightweight, powerful, battle-tested library
state, it’s easy to conceptualize what ought to be for building user interfaces with JavaScript. It’s not
happening at any given time. Your application a full framework, but rather a powerful tool that
effectively becomes a very large state machine. This may well change the way you approach front-end
means that you can test individual pieces of the UI development. We’ve found it to be an incredibly
in isolation as well as add new components without useful tool for our front-end development, and we’re
worrying about interfering with the rest of your very happy with our choice. For myself, at least,
application. working in React has dramatically impacted how I
think about writing user interfaces. I’m also excited to
SEO is easy. see React grow: now that Facebook is bringing React
Because React has built-in support for server-side to mobile with React Native, I suspect the future is an
rendering, you can serve a mostly complete page to exciting one.
search engines, which is a huge boost to SEO with If you want to get started with React,
very little effort. Granted, this only works in Node.js. the tutorial is the logical place to begin. There are also
Since Codecademy’s main app is written in Rails, we plenty of posts that introduce key React concepts
run a separate Node.js server that only handles React (this slide show is one of my favorites). Go ahead –
rendering. dive in, try building something, and see what you
think of React’s approach to front-end development.
React is compatible with legacy code and flexible I’m eager to hear what you think, and I’ll be listening
enough for the future. on Twitter as @brindelle.
Whereas adopting an entire framework is a big
commitment, you can slowly experiment with
adding React to an existing codebase. Likewise, if
we need to move away from React in the future, we
can do so fairly easily. At Codecademy, we decided
to write a new project entirely in React, to try it out
and learn how best to use it; that worked out well,

34 Next Generation HTML5 and JavaScript // eMag Issue 25 - Mar 2015

 PREVIOUS ISSUES

23
DevOps Toolchain
For Beginners

This eMag aims at providing an overview of an example

set of tools that would constitute a typical toolchain.
These are popular tools today, but you should look at
them as illustrations of the kind of tasks and workflows
you might need to perform in your organization as you
move along a DevOps path.

22
Web APIs:
From Start to Finish

24
This eMag contains a collection of articles and interviews
from late 2014 with some of the leading practictioners
and theorists in the Web API field. The material here
Mobile - Recently takes the reader on a journey from determining the
business case for APIs to a design methodology, meeting
New Technology and implementation challenges, and taking the long view
Already a Commodity? on maintaining public APIs on the Web over time

21
This eMag discusses some familiar and some not too familiar Continuous Delivery
development approaches and hopefully will give you a
Stories
helping hand while defining the technology stack for your
next mobile application.

Reaping the benefits of continuous delivery is hard work!

Culture, processes or technical barriers can challenge or
even break such endeavors. With this eMag we wanted
to share stories from leading practitioners who’ve been
there and report from the trenches. Their examples
are both inspiring and eye opening to the challenges
ahead.