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. 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