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.

2fdb5b62030270813e22f5e17d16f6b9?s=128

Steve Workman

April 16, 2013
Tweet

Transcript

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

    Steve Workman @steveworkman
  2. None
  3. HTTPS://GITHUB.COM/MIKKEREN/FIZZBUZZENTERPRISEEDITION

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

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

  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
  7. Which came first?

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

  9. Dependency Soup RequireJS .NET http://www.stefanprodan.eu/requirejs-for-asp-net-mvc/ Everyone else: http://requirejs.org/ <script src=“js/form-

    helpers.js”></script> <script src=“js/utilities.js”></script> <script src=“js/d3.js”></script> <script src=“js/main.js”></script> <script src=“js/chart.js”></script> <script data-main=“js/main.js” src=“requirejs.min.js”></script> require([“form-helpers”, “utilities”, “d3”], function () { });
  10. Modular Testable DRY

  11. ES6 features module definitions in the spec

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

  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
  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?
  15. http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller JavaScript Server & JavaScript HTML & CSS

  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
  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
  18. http://gs.statcounter.com/#browser-ww-monthly-201301-201303-map

  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/
  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/ Steve.workman@paconsulting.com 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