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

No content

HTTPS://GITHUB.COM/MIKKEREN/FIZZBUZZENTERPRISEEDITION

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

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

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

Which came first?

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

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

Modular Testable DRY

ES6 features module definitions in the spec

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

• 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

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?

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

 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

.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

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

 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/

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