Unless otherwise indicated, these s l ides are © 2013-2015 Pivotal Software, Inc. and l icensed under a Creat ive Commons Attr ibut ion-NonCommercial l icense: ht tp: / /creat ivecommons.org/ l icenses/by-nc/3.0/

SPRINGONE2GXWASHINGTON, DC

Modern Frontend EngineeringBy Dustin Whittle

@dustinwhittle

The web has evolved tremendously in the last decade. In this talk we will dive into the latest tools and

techniques that make for a modern foundation for frontend engineering. We will start with bootstrapping with Yeoman, move into managing dependencies with bower, and finally how to automate best practices with Grunt and Gulp. We will discuss the pros and cons of

modern ui toolkits like Zurb, Bootstrap, and SemanticUI and modern javascript frameworks like React, Angular,

and Ember. We will highlight the latest in css frameworks, javascript frameworks, and why you should

choose the right toolset for complex app or a single page app. When you leave this session you will be

prepared to launch a modern web application in 2015.

Dus$nWhi*le• dus$nwhi*le.com

• @dus$nwhi*le

• SanFrancisco,California,USA

• AppDynamics,Kwarter,SensioLabs,Yahoo!,PHPFreaks

• Technologist,Traveler,Pilot,Skier,Diver,Sailor,Golfer

Login

Flight Status

Search Flight

Purchase

Mobile

Big data

SOA

NOSQL

Cloud

Agile

Web

Application complexity is exploding

You kids have it easy!

Let me explain why…

Let’s start with bootstrapping

(you no longer have to write boilerplate)

Automate your frontend workflows

npm install -g grunt-cli

npm install -g gulp

Grunt and Gulp make it easy to incorporate best practices and

automate the tedious parts of web development.

I like Gulp because it is faster and simpler. Code

over configuration!

npm install -g bower

bower init

{ name: 'app', version: '0.0.0', authors: [ 'Dustin Whittle <dustin.whittle@gmail.com>' ], description: 'a demo app', main: ‘app.js', dependencies: { "jquery": "~2.x", } moduleType: [ 'es6' ], license: 'MIT', homepage: 'http://dustinwhittle.com/', ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] }

npm install -g yo

npm install -g yo bower grunt-cli gulp

npm install -g generator-webapp

yo webapp

Let's talk about frameworks

TodoMVC has been called many things including the 'Speed-

dating' and 'Rosetta Stone' of MV* frameworks.

git clone https://github.com/tastejs/todomvc

It is not just web frameworks:

standards, browser testing, email templates, server configs, analytics…

Performance Matters• Treat performance as a feature

• Using the 14kb Rule for instant loading

• Markup management

• Eliminating excess AJAX calls

• Working with and around application cache

• Developing a responsive design + image strategy

• Implementing a good touch-first strategy

• Code management for good production and development experiences

• Using task runners to build and deploy production code

npm install psi

The protocols are evolving• The limitations of HTTP/1.X forced us to develop various application workarounds

(sharding, concatenation, spriting, inlining, etc.) to optimize performance. However, in the process we’ve also introduced numerous regressions: poor caching, unnecessary downloads, delayed execution, and more.

• HTTP/2 eliminates the need for these hacks and allows us to both simplify our applications and deliver improved performance.

• You should unshard, unconcat, and unsprite your assets

• You should switch from inlining to server push

• Read Ilya Grigorik awesome book on browser performance - http://hpbn.co/http2

webpagetest.org

Questions?

FindtheseslidesonSpeakerDeck

h*ps://speakerdeck.com/dus$nwhi*le

http://www.appdynamics.com/

https://speakerdeck.com/addyosmani/automating-front-end-workflow

Unless otherwise indicated, these s l ides are © 2013-2015 Pivotal Software, Inc. and l icensed under a Creat ive Commons Attr ibut ion-NonCommercial l icense: ht tp: / /creat ivecommons.org/ l icenses/by-nc/3.0/ 86

Yeoman + Gulp + Bower = Frontend Automation

Enjoy the rest of SpringOne2Gx.

Learn More. Stay Connected.

@springcentral Spring.io/video