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