際際滷

際際滷Share a Scribd company logo

Front-End Engineering 101

Milan Korsos
Milan Korsos

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 www.usetallie.com

1 of 21
Download to read offline
UI 2013 Milan Korsos useTallie.com - milankorsos.com Febr 2013
Whats up? The Language Of The Web The Frameworks CSS is fun?! Btw, Browsers? QA != Farmville Cool Stuff
JavaScript No longer hide-this-div-then-animate-that De-facto language of the web Hard challenges for large scale apps JS as a runtime environment?
CoffeeScript - The Awesome Compiles to JavaScript You can still use any of the JS libraries Encourages good JS patterns Makes JS code shorter and more readable Compilation and debugging can be a pain
CoffeeScript - The Awesome http://coffeescript.org http://js2coffee.org Should You Learn CoffeeScript? What are the pros and cons of CoffeeScript? Dropbox dives into CoffeeScript Why I prefer JavaScript over CS? The Little Book On CoffeeScript Less Typing Bad Readability
The Frameworks Backbone.js Knockout.js Ember.js Angular.js Spine.js Meteor Rich JavaScript Applications the Seven Frameworks
Backbone.js Provides REST-persistable models With strong client side routing solution Does nothing towards automated UI sync Model, Collection, View, Router
Knockout.js Focuses on automated UI bindings Developer writes the models No routing (eg. Crossroads.js, Sammy.js) Observables, ObservableArrays
Meteor & Ember.js Meteor Crazy amazing framework from the future Bridges the server side runtime with client side Ember.js Biggest framework with the most functionality Ember makes all the common solutions
CSS can be FUN LESS, SASS Meta languages interpreted to CSS Variables, Mixins, Nested rules, Functions & Operations An Introduction To LESS, And Comparison To Sass Twitter Bootstrap Toolkit for kickstarting CSS for websites and web apps
Btw, Browsers?
IE <3 IE6, IE7: expensive to optimize, small user base IE8: Windows XP users who cannot update to IE9 IE9: Lack of HTML5 support IE10: Sucks less? Still in beta.. IE Dev Tools: painful compared to Chrome, Safari or Firefox
QA != Farmville Manual testing Automated UI testing UI Unit Testing JS Runtime Error Tracking http://errorception.com
Automated UI Testing If a bug pops up, add as a step to a scenario Run them daily on every browsers Run the related scenarios before check in Cucumber framework integrated to CI http://cukes.info
JavaScript Unit Testing Jasmine BDD framework Testing the Models and Lists Integrated to CI Sinon.js library Stubs, spys, faking, mocking, etc
Cool Stuff HTML5 Event driven programming Measure all the things! D3.js
HTML5 Actually 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+ http://www.html5rocks.com http://diveintohtml5.info
Event Driven JavaScript Kill the callbacks nested callbacks nested callbacks. Time to write maintainable code. http://twitter.github.com/flight/ Amazon: Async JavaScript
Measure All The Things Measure users, trends and performance Google Analytics New Relic KISSmetrics Errorception Optimizely, Chartbeat, etc...
D3.js - The Chart Tool Manipulating documents based on data https://github.com/mbostock/d3/wiki/Gallery Tons of charting libraries based on D3 NVD3.js - Reusable charts for d3.js
Front-End Engineering 101

More Related Content

Front-End Engineering 101

  • 1. UI 2013 Milan Korsos useTallie.com - milankorsos.com Febr 2013
  • 2. Whats up? The Language Of The Web The Frameworks CSS is fun?! Btw, Browsers? QA != Farmville Cool Stuff
  • 3. JavaScript No longer hide-this-div-then-animate-that De-facto language of the web Hard challenges for large scale apps JS as a runtime environment?
  • 4. CoffeeScript - The Awesome Compiles to JavaScript You can still use any of the JS libraries Encourages good JS patterns Makes JS code shorter and more readable Compilation and debugging can be a pain
  • 5. CoffeeScript - The Awesome http://coffeescript.org http://js2coffee.org Should You Learn CoffeeScript? What are the pros and cons of CoffeeScript? Dropbox dives into CoffeeScript Why I prefer JavaScript over CS? The Little Book On CoffeeScript Less Typing Bad Readability
  • 7. Backbone.js Provides REST-persistable models With strong client side routing solution Does nothing towards automated UI sync Model, Collection, View, Router
  • 8. Knockout.js Focuses on automated UI bindings Developer writes the models No routing (eg. Crossroads.js, Sammy.js) Observables, ObservableArrays
  • 9. Meteor & Ember.js Meteor Crazy amazing framework from the future Bridges the server side runtime with client side Ember.js Biggest framework with the most functionality Ember makes all the common solutions
  • 10. CSS can be FUN LESS, SASS Meta languages interpreted to CSS Variables, Mixins, Nested rules, Functions & Operations An Introduction To LESS, And Comparison To Sass Twitter Bootstrap Toolkit for kickstarting CSS for websites and web apps
  • 12. IE <3 IE6, IE7: expensive to optimize, small user base IE8: Windows XP users who cannot update to IE9 IE9: Lack of HTML5 support IE10: Sucks less? Still in beta.. IE Dev Tools: painful compared to Chrome, Safari or Firefox
  • 13. QA != Farmville Manual testing Automated UI testing UI Unit Testing JS Runtime Error Tracking http://errorception.com
  • 14. Automated UI Testing If a bug pops up, add as a step to a scenario Run them daily on every browsers Run the related scenarios before check in Cucumber framework integrated to CI http://cukes.info
  • 15. JavaScript Unit Testing Jasmine BDD framework Testing the Models and Lists Integrated to CI Sinon.js library Stubs, spys, faking, mocking, etc
  • 16. Cool Stuff HTML5 Event driven programming Measure all the things! D3.js
  • 17. HTML5 Actually 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+ http://www.html5rocks.com http://diveintohtml5.info
  • 18. Event Driven JavaScript Kill the callbacks nested callbacks nested callbacks. Time to write maintainable code. http://twitter.github.com/flight/ Amazon: Async JavaScript
  • 19. Measure All The Things Measure users, trends and performance Google Analytics New Relic KISSmetrics Errorception Optimizely, Chartbeat, etc...
  • 20. D3.js - The Chart Tool Manipulating documents based on data https://github.com/mbostock/d3/wiki/Gallery Tons of charting libraries based on D3 NVD3.js - Reusable charts for d3.js
AboutCopyright
息 2025 際際滷