10 Years of JavaScript
Download as key, pdf0 likes286 views
The document summarizes the author's 10 years of experience with JavaScript. It discusses how JavaScript has evolved from being used mainly for small dynamic HTML effects to becoming a powerful language for developing rich web applications. It describes recurring patterns seen over time, such as struggles between frontend and backend development and efforts to bring object-oriented programming to JavaScript. Frameworks like jQuery helped solve browser inconsistencies and made JavaScript development much easier. Performance remains important, with recommendations like minimizing HTTP requests and function calls.
10 Years of JavaScript
- 1. 10 Years of JavaScript what I’ve learnt so far
- 2. 10 Years of Javascript Brief introduction of me personally, where I started (PHP), accomplishments and professional career errata Who am I? A run-through the history of professional Javascript usage and the evolution of the Web Developer profession. From browsers to ECMA to Ajax to libraries and commercialisation 10 Years Ago... Main pattern is the continuous struggle on delegation of logic; what should be done on the client side and what on the ser ver? Discussion goes BEYOND processing power of clients Frontend vs. Backend Dive deeper in more patterns that are more technical Other Recurring Patterns End of Part I Conclusion about what I’ve really learnt the past ten yrs, including me being happy about community growth! #amsterdamjs rules!
- 3. Who am I? Small joke about definitely not being a nerd ;) Geek Talk about ZMG, big for Mambo and J!, no JS at that Started with PHP time, only small DHTML stuff Landed a job (quit school!) Talk about university - art, sociology, psychology, etc. and future prospects in that area :( Learnt that there’s never enough time! A very happy man :) Job at eBuddy and first serious JS work, built clients, framework, Javeline, Ajax.org Girlfriend Sailing whenever I can Made profession out of hobby Doing puzzles > 40hrs a week
- 4. No dashes, because it screws up my presentation! :P Frontend vs. Backend Describe evolving systems in hardware/ computing power Power struggle Flash leads the way - clients can do a lot Sandboxing holds back innovation Delay: dotcom boom slowed down innovation Richer clients Browser wars back on track (finally...)!! Describe transition Backend: from power horse to data cloud Dissimulation of MVC pattern - exemplify! Frontend: from dumb terminal to rich platform Driven by innovation Innovation (re)sets the balance cloud? rich client? parallel computing? JIT’ed JS?
- 5. Other Recurring Patterns Javascript vs. ECMA vs. JScript and x-browser incompatibilities Fixing the browser Lots of talk about it, blogosphere hot about it AFTER Ajax was coined. Object Oriented JS Big Boom of the ‘frameworks’ Combine the above 2 points: frameworks are born. WTFJS.com Nice display and proof why frameworks exist and are still needed. With HTML5 even more pressure will be on
- 6. O.R.P. - Fixing the browser Extending native objects - decorator pattern Bringing Ruby to JS OO pattern implementation PrototypeJS Scriptaculous made it big MochiKit Don’t know much about it, it was big enough Odd one out - proprietary UI-centric client-side framework with a Backbase declarative API (XML) Tries to fix a whole other spectrum of problems NO, not JQuery...not yet...
- 7. O.R.P. - Object Oriented JS What’s so nice about OO? Scholars-programmers were taught to think in terms of objects Inheritance considerations (classes, modules, packages, namespaces) Big server-side and desktop app languages are OO Paradigm: getting OO features in JS Prototypal inheritance not often understood - odd bite to it Edwards’ Base.js Show example Stephenson’s Prototype Crockford: “I now see my early attempts to support the classical model in JavaScript as a mistake” NO, still not JQuery...not yet... Hehe...
- 8. O.R.P. - Object Oriented JS var Animal = Base.extend({ constructor: function(name) { this.name = name; }, name: "", eat: function() { this.say("Yum!"); }, say: function(message) { alert(this.name + ": " + message); } }); var Cat = Animal.extend({ eat: function(food) { if (food instanceof Mouse) this.base(); else this.say("Yuk! I only eat mice."); } }); var Mouse = Animal.extend();
- 9. O.R.P. - Object Oriented JS What’s so nice about OO? Scholars-programmers were taught to think in terms of objects Inheritance considerations (classes, modules, packages, namespaces) Big server-side and desktop app languages are OO Paradigm: getting OO features in JS Prototypal inheritance not often understood - odd bite to it Edwards’ Base.js Stephenson’s Prototype Show example Crockford: “I now see my early attempts to support the classical model in JavaScript as a mistake” NO, still not JQuery...not yet... Hehe...
- 10. O.R.P. - Object Oriented JS var Person = Class.create(); Person.prototype = { initialize: function(name) { this.name = name; }, say: function(message) { return this.name + ': ' + message; } }; var guy = new Person('Miro'); guy.say('hi'); // -> "Miro: hi" var Pirate = Class.create(); // inherit from Person class: Pirate.prototype = Object.extend(new Person(), { // redefine the speak method say: function(message) { return this.name + ': ' + message + ', yarr!'; } }); var john = new Pirate('Long John'); john.say('ahoy matey'); // -> "Long John: ahoy matey, yarr!"
- 11. O.R.P. - Object Oriented JS What’s so nice about OO? Scholars-programmers were taught to think in terms of objects Inheritance considerations (classes, modules, packages, namespaces) Big server-side and desktop app languages are OO Prototypal inheritance not often understood - odd bite to it Paradigm: getting OO features in JS Edwards’ Base.js Stephenson’s Prototype Crockford: “I now see my early attempts to support the classical model in JavaScript as a mistake” NO, still not JQuery...not yet... Hehe...
- 12. O.R.P. - Big Boom of ‘frameworks’ Combination of Fixing the browser and OO in JS DOMReady CSS3 Selectors Widgets - ready-made packages of functionality: OpenRico Dojo, Qooxdoo as Open Source Bindows, Backbase, Tibco as proprietary No list here, ‘cause it’s infinite...almost Reasoning YES, now JQuery is among us! Explain JQuery’s success The power of extensibility Is it a framework? Performance Separate slide on Performance (stuff I’ve learnt about it)
- 13. Performance Minimize the AMOUNT of HTTP requests Modularize Show next slide (example) Function calls are expensive/ avoid recursion Lookups are expensive
- 14. Performance fab = {}; (function(global) { var a = 1, b = 2; global.fab.newModule = { getA: function() { return a; }, setA: function(newA) { a = newA; }, getB: function() { return b; }, setB: function(newB) { b = newB; }, getSum: function() { return a + b; } }; })(this);
- 15. Performance Minimize the AMOUNT of HTTP requests Modularize Function calls are expensive/ avoid recursion Lookups are expensive
- 16. End of Part 1 Conclusion Questions? Follow me @mikedeboer Find me @amsterdamjs ;)