Ontwikkelen in de browser

25
De web-browser als ontwikkelplatform Ervaringen en huidige stand van zaken

description

Using backbone to develop single page in-browser web applications

Transcript of Ontwikkelen in de browser

Page 1: Ontwikkelen in de browser

De web-browser als ontwikkelplatform

Ervaringen en huidige stand van zaken

Page 2: Ontwikkelen in de browser

Historisch perspectief

JavaScript, van browserlijm tot ontwikkelplatform

2000: Mozilla stimuleert gebruik van webstandaarden

2004: 'Ajax' (voorheen 'remoting') als normale oplossing

2006: jQuery vereenvoudigd ontwikkelen met JavaScript

2008: Tweede browser oorlog n.a.v. Google Chrome

2012: Met Type inference hoopt Firefox het performance gat met Java te sluiten

Page 3: Ontwikkelen in de browser
Page 4: Ontwikkelen in de browser

Wat krijg je met jQuery?

DOM selector engine DOM manipulatie Event binding, custom events (event bus) Compacte notatie Cross-browser

Veel documentatie en een actieve community (plugins)

Page 5: Ontwikkelen in de browser
Page 6: Ontwikkelen in de browser

Grote in-browser applicaties met jQuery?

Krachtig gereedschap + enthousiasme = Chaos!

Page 7: Ontwikkelen in de browser

Een voorbeeld met ...

Page 8: Ontwikkelen in de browser
Page 9: Ontwikkelen in de browser
Page 10: Ontwikkelen in de browser
Page 11: Ontwikkelen in de browser
Page 12: Ontwikkelen in de browser
Page 13: Ontwikkelen in de browser
Page 14: Ontwikkelen in de browser
Page 15: Ontwikkelen in de browser
Page 16: Ontwikkelen in de browser
Page 17: Ontwikkelen in de browser
Page 18: Ontwikkelen in de browser
Page 19: Ontwikkelen in de browser
Page 20: Ontwikkelen in de browser

Testen?

Page 21: Ontwikkelen in de browser
Page 22: Ontwikkelen in de browser
Page 23: Ontwikkelen in de browser

Ontwikkelingen

Page 24: Ontwikkelen in de browser

Coffeescriptsquare = (x) -> x * x square = function(x) { return x * x; }; list = [1, 2, 3, 4, 5] cubes = (math.cube num for num in list) cubes = (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = list.length; _i < _len; _i++) { num = list[_i]; _results.push(math.cube(num)); } return _results; })();

Page 25: Ontwikkelen in de browser