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

Modern Frontend Engineering @ SpringOne2GX

6d9b2c900628962b16a5cb5e4e73990e?s=47 Dustin Whittle
September 17, 2015

Modern Frontend Engineering @ SpringOne2GX

Modern Frontend Engineering presented at SpringOne2GX 2015


Dustin Whittle

September 17, 2015


  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. You kids have it easy! Let me explain why…

  6. Let’s start with bootstrapping (you no longer have to write

  7. None
  8. None
  9. None
  10. Automate your frontend workflows

  11. None
  12. None
  13. npm install -g grunt-cli

  14. None
  15. None
  16. npm install -g gulp

  17. None
  18. Grunt and Gulp make it easy to incorporate best practices

    and automate the tedious parts of web development.
  19. None
  20. I like Gulp because it is faster and simpler. Code

    over configuration!
  21. None
  22. npm install -g bower

  23. bower init

  24. { 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' ] }
  25. None
  26. None
  27. None
  28. npm install -g yo

  29. None
  30. npm install -g yo bower grunt-cli gulp

  31. npm install -g generator-webapp

  32. yo webapp

  33. None
  34. None
  35. None
  36. Let's talk about frameworks

  37. None
  38. TodoMVC has been called many things including the 'Speed- dating'

    and 'Rosetta Stone' of MV* frameworks.
  39. git clone https://github.com/tastejs/todomvc

  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. It is not just web frameworks: standards, browser testing, email

    templates, server configs, analytics…
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. 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
  75. None
  76. None
  77. npm install psi

  78. None
  79. 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
  80. webpagetest.org

  81. None
  82. Questions?

  83. Find these slides on SpeakerDeck h*ps://speakerdeck.com/dus$nwhi*le

  84. http://www.appdynamics.com/

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

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