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

Front-end Web Architectures That Won't Bite (you in the ass)

Front-end Web Architectures That Won't Bite (you in the ass)

Apps start out like a duct-tape bow on a present, and end up like a wonderful production line of beauty. But, there is definitely such a thing as a step too far.

There is a good middle-ground of maintainability - in this deck I’ll show you the architecture, tools and techniques I use for my projects.

Steve Workman

April 16, 2013
Tweet

More Decks by Steve Workman

Other Decks in Programming

Transcript

  1. FRONT-END WEB
    ARCHITECTURES THAT
    WON’T BITE
    (YOU IN THE ASS)
    Steve Workman
    @steveworkman

    View Slide

  2. View Slide

  3. HTTPS://GITHUB.COM/MIKKEREN/FIZZBUZZENTERPRISEEDITION

    View Slide

  4. http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
    JavaScript
    Server & JavaScript
    HTML & CSS

    View Slide

  5. http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
    JavaScript
    Server & JavaScript
    HTML & CSS

    View Slide

  6. JQUERY IS NOT THE ANSWER TO GOOD
    JAVASCRIPT
     JavaScript != jQuery
     Solves cross-browser compatibility problems
     Really useful for AJAX and events
     Performance matters – ID selectors are 2.8% of native, tag name selectors are
    0.23% of native
    http://vanilla-js.com

    View Slide

  7. Which came first?

    View Slide

  8. Form-helpers.js Main.js
    Charts.js
    Utilities.js
    D3.js

    View Slide

  9. Dependency Soup RequireJS
    .NET
    http://www.stefanprodan.eu/requirejs-for-asp-net-mvc/
    Everyone else:
    http://requirejs.org/
    helpers.js”>
    src=“js/utilities.js”>
    src=“js/d3.js”>
    src=“js/main.js”>
    src=“js/chart.js”>
    src=“requirejs.min.js”>
    require([“form-helpers”,
    “utilities”, “d3”], function () {
    });

    View Slide

  10. Modular Testable DRY

    View Slide

  11. ES6 features module
    definitions in the
    spec

    View Slide

  12. http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
    JavaScript
    Server & JavaScript
    HTML & CSS

    View Slide

  13. • Can be overkill for smaller
    projects
    • “Yet another thing to learn”
    • Separation of concerns on
    client-side
    • Huge maintainability benefits
    for JavaScript-heavy sites and
    web apps

    View Slide

  14. Use Handlebars / Mustache
    / Underscore / Jade /
    [syntax of choice]
    Separates View from Model
    You wouldn’t put HTML in
    your C# or Java classes, so
    why would you do it in
    JavaScript?

    View Slide

  15. http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
    JavaScript
    Server & JavaScript
    HTML & CSS

    View Slide

  16.  CSS is more complicated than it’s ever been, and gets more complicated with
    every module
     Need to be able to re-use the basics – grids, table styles, forms, complex syntax,
    have common variables, and solve the vendor prefix problem

    View Slide

  17. .table-sparkline {
    .box-sizing(border-box);
    tbody tr {
    th { width: 50%;}
    td {
    &.sparkline { width: 15%; }
    &.amount { width: 35%; }
    }
    }
    thead tr {
    td, th {
    background-color: @companyLogoBlack;
    color: @offWhite;
    font-weight: normal;
    }
    }
    }
    .table-sparkline {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    }
    .table-sparkline tbody tr th {
    width:50%;
    }
    .table-sparkline tbody tr td.sparkline {
    width:15%;
    }
    .table-sparkline tbody tr td.amount {
    width:35%;
    }
    .table-sparkline thead tr td,
    .table-sparkline thead tr th {
    background-color:#2f2f2f;
    color:#f2f2f2;
    font-weight:400;
    }
    Less CSS Output

    View Slide

  18. http://gs.statcounter.com/#browser-ww-monthly-201301-201303-map

    View Slide

  19.  Yes, it’s awesome
     Enforces good web design practices
     Makes web development faster
    • No, you don’t need all of it, or even
    half of it (always build from source)
    • Even when optimised, over 70% of
    CSS selectors are unused
    • Makes identi-kit websites easily
    Consider the alternatives
    Skeleton – http://getskeleton.com
    Initializr - http://www.initializr.com/
    Foundation -http://foundation.zurb.com/

    View Slide

  20. http://www.flickr.com/photos/dkeats/5140359468/ - Snake Charmer, Derek Keats
    http://www.flickr.com/photos/theartguy/3135448990/ - Duct Tape Bow – Aaron Smith
    http://www.flickr.com/photos/stevendepolo/3703145222/ - Wrapped Gifts – Steven Depolo
    http://www.flickr.com/photos/jeffsand/3871415191/ - Square Peg, Round Hole – Jeff Sandquist
    http://www.flickr.com/photos/aidanmorgan/5319367230/ - Chicken and Egg – John Morgan
    http://www.flickr.com/photos/rene-germany/18978653/ - Six Flags, New England – Rene Schwietzke
    http://www.123rf.com/photo_11426487_chonburi-thailand--december-4-a-man-puts-his-head-in-crocodile.html - ichbintai - Man
    puts his head in a crocodile
    Photo Credits
    http://www.paconsulting.com/careers/
    [email protected]
    Twitter: @steveworkman
    Further reading:
    JavaScript Design Patterns (ebook)
    http://addyosmani.com/resources/ess
    entialjsdesignpatterns/book/
    JavaScript templates
    https://developer.mozilla.org/en-
    US/docs/JavaScript_templates
    Front-end testing with CasperJS
    http://robertbasic.com/blog/frontend-
    testing-with-phantomjs-and-casperjs

    View Slide