Front-End Engineering 101


Published on

A quick intro to Front End Engineering in 2013.

JavaScript vs CoffeeScript, JS Frameworks, Knockout.js, Backbone.js, CSS, LESS, Bootstrap, Browsers, UI Testing, Jasmine BDD, Cucumber, HTML5, Event Driven JavaScript, D3

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Front-End Engineering 101

  1. 1. UI 2013 Milan - Febr 2013
  2. 2. What’s up?The Language Of The WebThe FrameworksCSS is fun?!Btw, Browsers?QA != FarmvilleCool Stuff
  3. 3. JavaScriptNo longer ‘hide-this-div-then-animate-that’De-facto language of the webHard challenges for large scale appsJS as a runtime environment?
  4. 4. CoffeeScript - The AwesomeCompiles to JavaScriptYou can still use any of the JS librariesEncourages good JS patternsMakes JS code shorter and more readableCompilation and debugging can be a pain
  5. 5. CoffeeScript - The Awesomehttp://coffeescript.orghttp://js2coffee.orgShould You Learn CoffeeScript?What are the pros and cons of CoffeeScript?Dropbox dives into CoffeeScriptWhy I prefer JavaScript over CS?The Little Book On CoffeeScriptLess Typing Bad Readability
  6. 6. The FrameworksBackbone.js Angular.jsKnockout.js Spine.jsEmber.js MeteorRich JavaScript Applications – the Seven Frameworks
  7. 7. Backbone.jsProvides REST-persistable modelsWith strong client side routing solutionDoes nothing towards automated UI syncModel, Collection, View, Router
  8. 8. Knockout.jsFocuses on automated UI bindingsDeveloper writes the modelsNo routing (eg. Crossroads.js, Sammy.js)Observables, ObservableArrays
  9. 9. Meteor & Ember.jsMeteor Crazy amazing framework from the future Bridges the server side runtime with client sideEmber.js Biggest framework with the most functionality Ember makes all the common solutions
  10. 10. CSS can be FUNLESS, SASS Meta languages interpreted to CSS Variables, Mixins, Nested rules, Functions & Operations An Introduction To LESS, And Comparison To SassTwitter Bootstrap Toolkit for kickstarting CSS for websites and web apps
  11. 11. Btw, Browsers?
  12. 12. IE <3IE6, IE7: expensive to optimize, small user baseIE8: Windows XP users who cannot update to IE9IE9: Lack of HTML5 supportIE10: Sucks less? Still in beta..IE Dev Tools: painful compared to Chrome, Safari or Firefox
  13. 13. QA != FarmvilleManual testingAutomated UI testingUI Unit TestingJS Runtime Error Tracking
  14. 14. Automated UI TestingIf a bug pops up, add as a step to a scenarioRun them daily on every browsersRun the related scenarios before check inCucumber framework integrated to CI
  15. 15. JavaScript Unit TestingJasmine BDD framework Testing the Models and Lists Integrated to CISinon.js library Stubs, spys, faking, mocking, etc
  16. 16. Cool StuffHTML5Event driven programmingMeasure all the things!D3.js
  17. 17. HTML5Actually there are useful and working APIs! Drag And Drop API: even IE supports it File API: For file management. IE? Nope History API: History manipulation. IE? Nope Local Storage API: IE8+
  18. 18. Event Driven JavaScriptKill the callbacks nested callbacks nestedcallbacks. Time to write maintainable code. Async JavaScript
  19. 19. Measure All The ThingsMeasure users, trends and performance Google Analytics New Relic KISSmetrics Errorception Optimizely, Chartbeat, etc...
  20. 20. D3.js - The Chart ToolManipulating documents based on data of charting libraries based on D3 NVD3.js - Reusable charts for d3.js