Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Frontend Engineering @ SpringOne2GX

Dustin Whittle
September 17, 2015

Modern Frontend Engineering @ SpringOne2GX

Modern Frontend Engineering presented at SpringOne2GX 2015

Dustin Whittle

September 17, 2015
Tweet

More Decks by Dustin Whittle

Other Decks in Technology

Transcript

  1. Unless otherwise indicated, these slides are © 2013-2015 Pivotal Software,

    Inc. and licensed under a Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ SPRINGONE2GX WASHINGTON, DC Modern Frontend Engineering By Dustin Whittle @dustinwhittle
  2. 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.
  3. Dus$n Whi*le • dus$nwhi*le.com • @dus$nwhi*le • San Francisco, California,

    USA • AppDynamics, Kwarter, SensioLabs, Yahoo!, PHPFreaks • Technologist, Traveler, Pilot, Skier, Diver, Sailor, Golfer
  4. Login Flight Status Search Flight Purchase Mobile Big data SOA

    NOSQL Cloud Agile Web Application complexity is exploding
  5. Grunt and Gulp make it easy to incorporate best practices

    and automate the tedious parts of web development.
  6. { name: 'app', version: '0.0.0', authors: [ 'Dustin Whittle <[email protected]>'

    ], 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' ] }
  7. It is not just web frameworks: standards, browser testing, email

    templates, server configs, analytics…
  8. 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
  9. 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
  10. Unless otherwise indicated, these slides are © 2013-2015 Pivotal Software,

    Inc. and licensed under a
 Creative Commons Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 86 Yeoman + Gulp + Bower = Frontend Automation Enjoy the rest of SpringOne2Gx. Learn More. Stay Connected. @springcentral Spring.io/video