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.

Transcript

1. FRONT-END WEB ARCHITECTURES THAT WON’T BITE (YOU IN THE ASS) Steve Workman @steveworkman
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