Kann JavaScript elegant sein?

Kann JavaScript elegant sein? Neue JavaScript Frameworks versuchen die komplexe browsersei<ge Programmierung zu erleichtern. Jonas Bandi h+p://blog.jonasbandi.net h+p://twi+er.com/jbandi

How the enterprise sees JavaScript developers…

A very large group of developers s0ll thinks of JavaScript as a joke. -‐ Davy Bryon Im convinced there is a need to replace JavaScript -‐ Mar?n Fowler JavaScript is fast becoming a serious contender to JVM languages. -‐ Aslak Hellesoy

Agenda •  JavaScript: The Language •  Recent Success of JavaScript •  JavaScript Frameworks •  Example of “modern” JavaScript development with Backbone.js

The History of JavaScript •  HyperCard for the browser Java Scheme Self JavaScript •  Make it look like Java •  Completed in 10 days Brendan Eich

The History of JavaScript •  1995: Netscape Navigator 2.0 – LiveScript –  Coopera?on with Sun: JavaScript 1.0 •  1996: IE 3 -‐ JScript •  1997: ECMAScript, 1998: ISO-‐Norm •  2010: JavaScript 1.8.2 / EcmaScript 5 –  Mozilla 4, IE 9 •  Work in Progress: JavaScript 2.0 “ECMAScript Harmony” •  Java SE 6 contains a complete JavaScript Run?me (Rhino)

Year JavaScript JScript ECMAScript 1996 1.0 1.0 1996 1.1 2.0 1997 1.2 1998 1.3 3.0 Edi?on 1 1.4 4.0 5.0 1999 5.1 2000 1.5 5.5 Edi?on 2 5.6 Edi?on 3 2005 1.6 8 2006 1.7 2008 1.8 2009 1.8.2 Edi?on 5 2010 1.8.5 9 2011 Edi?on 5.1

JavaScript a mature language?

Common OO language: JavaScript: •  Method •  Func?on •  Class •  Constructor •  Module

ThoughtWorks Technology Radar, July 2011

GWT GWT is a reasonable implementa?on of a poor architectural choice. GWT a+empts to hide many of the details of the web as a plaeorm by crea?ng desktop metaphors in Java and genera?ng JavaScript code to implement them. First, in many ways, JavaScript is more powerful and expressive than Java, so we suspect that the genera?on is going in the wrong direc?on. ThoughtWorks Technology Radar, July 2011 h+p://www.thoughtworks.com/radar

The Success of JavaScript •  Every OS ships with a WebBrowser •  Every Smartphone ships with a WebBrowser •  Performance Improvements in Browsers –  very performant JS Engines –  Hardware accelera?on •  REST & The Cloud -‐ Simple JS Interfaces to Services –  JSON –  No middleware needed –  Services directly addressable from Browser / Mashups –  Simplicity – No Middleware Needed! •  HTML5

Success of JavaScript •  Windows 8: Metro / WinRT •  NodeJS: JavaScript on the Server –  Most popular project on Github –  Modules: h+ps://github.com/joyent/node/wiki/modules –  5.5k Packages: h+p://search.npmjs.org/ •  NoSQL Databases –  JavaScript, JSON –  CouchDB

Any applica0on that can be wriBen in JavaScript, will eventually be wriBen in JavaScript. -‐  Atwood’s Law h+p://www.codinghorror.com/blog/2007/07/the-‐principle-‐of-‐least-‐power.html

Cloud9 IDE: h+p://c9.io/

Popularity of JavaScript h+p://www.?obe.com/index.php/content/paperinfo/tpci/index.html

h+ps://github.com/languages

h+ps://github.com/popular/watched

Leverage a vast amount of Web Developers

Modern JavaScript development.

The Problem •  Things s?ll tend to get messy •  Spaghej: –  Selectors Callbacks callbacks selectors callbacks •  The DOM is everywhere •  Where is the state? –  In the callbacks –  In the DOM •  No clear applica?on structure

DOM-‐Manipula?on HTML/DOM Selectors Event-‐Callbacks Event-‐ JavaScript Callbacks Request Response Request Response AJAX Network-‐Callbacks Server

Can you draw a UML diagram of your JavaScript code?

What is the Presenta?on Layer anyways? ring Ini0al Request: HTML Rende Presenta?on Layer HTML/DOM Service Layer JavaScript Applet Browser

What is the Presenta?on Layer anyways? HTML / JSON ring Rende HTML/DOM Service Layer JavaScript Applet Browser

A “Second Genera?on” of JavaScript Frameworks •  Backbone.js •  Spine.js •  JavaScript MVC •  Knockout.js •  Lightweight •  MVC in the Browser •  Dealing with state without using the DOM •  Building a “Class-‐Infrastructure” •  Conven?ons

Backbone •  Architectural Pa+ern: MVC •  Modulariza?on / Structure / Code organiza?on •  Client Side Rendering / Client Side Templa?ng •  Browser State Management (loca?on.hash) •  Client Side Rou?ng •  Simplifying RESTful communica?on •  Designed for Single Page Apps

Who Uses It?

Features •  Separa?on of concerns with “Base-‐Classes”: •  Models & Collec?ons •  Views •  Router •  Events •  Infrastructure for Persistence •  “HTTP-‐Persistence” -‐> RESTful CRUD •  Local Persistence (HTML5) •  Testability

Demo: Backbone Tunes

Can you draw a UML diagram of your JavaScript code?

Backbone Tunes: Models

Backbone Tunes: Views

Models: Views: BackboneTunes window player Player PlayListView LibraryView library Playlist Albums PlayListAlbumView LibraryAlbumView Album AlbumView

Models: Views:

What about REAL structure? •  Asset Pipeline •  Build/Deploy Source Code Compile Assemble Deployment Ar?fact

Demo: CRUD Admin

Challenges •  JavaScript •  Consistency between client and server •  Interna?onaliza?on •  Security?

Advantages •  Avoid spaghej code •  Cleanly separated concerns •  Easy to learn / simple to integrate •  No abstrac?on of web-‐technologies –  Request / Response –  DOM –  “Hands-‐On” in the Browser, Fast Development Feedback –  …

JavaScript Tes?ng

Debugging

elegant sein? Kann JavaScript

h+p://yuiblog.com/crockford/

h+p://peepcode.com/ h+p://tekpub.com/ h+p://backbonescreencasts.com/

http://blog.jonasbandi.net	1655
http://www.dnug-bern.ch	44
http://feeds.feedburner.com	18
http://dnug-bern.ch	13
http://www.newsblur.com	10
http://www.directrss.co.il	8
http://www.hanrss.com	3
http://127.0.0.1	1
http://www.rxx.co.il	1

Kann JavaScript elegant sein?

by jbandi on Jan 02, 2012

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 1,753

Statistics

Kann JavaScript elegant sein? — Presentation Transcript