Liberate the Front-End

For far too long client-side code has been held hostage in the clutches of the server-side! Enough is enough! Now is the time to liberate your JavaScript, HTML, CSS, and move them into a modern workflow where preprocessors, test runners, and transpilation tools are platform agnostic, performant and fun!

Join us at this session as we explore why the server-side should stick to what it is good at: security, authentication, services, and data storage; along the way we will explore some of the benefits of migrating our client-side code to a front-end optimized tool-stack using Node.JS and Grunt.

Transcript

1. liberate the
   FRONT-END
   

   View Slide

2. lesson
   1. "Modern" Workflow
   2. Example App
   3. Grunt & Tools
   

   View Slide

3. W E B A P P
   TRADITIONAL
   HEAVY
   +120
   DOES ALL
   THE THINGS
   templates
   css, html,
   javascript
   mvc
   authentication
   security
   storage
   

   View Slide

4. templates
   css, html,
   javascript
   mv*
   authentication
   security
   storage
   xhr
   json
   platform
   modern
   W E B A P P
   MODERN
   SMART
   +240
   DOES THINGS
   SMARTER
   

   View Slide

5. View Slide

6. Modern Webapp
   Modern Platform
   Modern Tooling
   ✓
   ✓
   

   View Slide

7. compile
   concatenate
   minify
   templates
   analyze /
   test
   modules
   .net + frontend
   ruby + frontend
   java + frontend
   * + frontend
   T O O L I N G
   TRADITIONAL
   SECOND CLASS
   +120
   DOES ALL
   THE THINGS
   

   View Slide

8. integrate
   optimize
   test
   compile
   analyze
   modules
   concatenate
   minify
   templates
   T O O L I N G
   TRADITIONAL
   SECOND CLASS
   +240
   DOES THINGS
   SMARTER
   

   View Slide

9. IT's Demo
   Time!!!
   

   View Slide

10. THANKS!
    @dmosher
    github.com/davemo/fem-grunt-workflow
    frontendmasters.com/courses/workflows-and-tooling
    youtube.com/users/vidjadavemo
    speakerdeck.com/dmosher
    

    View Slide