View
154
Download
2
Category
Tags:
Preview:
DESCRIPTION
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
Citation preview
UI 2013Milan Korsos
useTallie.com - milankorsos.com
Febr 2013
What’s 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 Awesomehttp://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
MeteorCrazy amazing framework from the future
Bridges the server side runtime with client side
Ember.jsBiggest 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 datahttps://github.com/mbostock/d3/wiki/Gallery
Tons of charting libraries based on D3NVD3.js - Reusable charts for d3.js
Recommended