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

Liberate the Front-End

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.

David Mosher

March 16, 2014
Tweet

More Decks by David Mosher

Other Decks in Programming

Transcript

  1. liberate the
    FRONT-END

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  5. Modern Webapp
    Modern Platform
    Modern Tooling


    View full-size slide

  6. 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 full-size slide

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

    View full-size slide

  8. IT's Demo
    Time!!!

    View full-size slide

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

    View full-size slide