Front-End Engineering 101
2 likes1,117 views
The document discusses various aspects of web development, focusing on JavaScript and its frameworks like Coffeescript, Backbone.js, and Meteor. It highlights challenges in large-scale applications, the importance of testing, and introduces CSS pre-processors such as LESS and SASS. Furthermore, it emphasizes the significance of HTML5 and various APIs for modern web applications, along with tools for analytics and error tracking.
Front-End Engineering 101
- 1. UI 2013 Milan Korsos useTallie.com - milankorsos.com Febr 2013
- 2. What’s 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
- 6. The Frameworks Backbone.js Knockout.js Ember.js Angular.js Spine.js Meteor Rich JavaScript Applications – the Seven Frameworks
- 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
- 11. Btw, Browsers?
- 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