De evolutie van JavaScript Edwin van der Thiel Technisch Specialist, Sogeti Edwin.van.der.thiel@sogeti.nl www.sogeti.nl
Agenda Verleden Heden Toekomst Concerns Systeem architectuur JavaScript historie Heden JavaScript basics Enterprise JavaScript - TypeScript Libraries Toekomst Web 3.0 WebGL Concerns
Windows Kernel Services Systeem Architectuur DirectX / OpenGL DirectX WebGL C C++ .NET HTA Web C C++ C# VB HTML Windows Explorer Internet Explorer Windows Runtime WIN32 API - Communication - Devices - Graphics - Control Objects BrowseUI WinRT API - Communication - Devices - Graphics MSHTML - Trident Layout Engine - HTML / CSS Parser - DOM - Active Document Trident Engine Windows Kernel Services
JavaScript Historie Maart 1996 - Netscape lanceert JavaScript Augustus 1996 - Microsoft IE met JScript November 1996 – Netscape biedt JavaScript aan ECMA voor standaardisatie Juni 1997 – ECMA publiceert ECMAScript 1999 – Microsoft embed JScript in Windows Script Host 2000 – Exception Handling 2005 – Uitbreiding Arrays Huidig – JavaScript gestandaardiseerd ECMA-262 (5.1)
JavaScript Basics - HTML Definieert de document structuur <html> <head>, <body> <form>, <input> <article>, <section> <div>, <p> <img>, <video>, <audio> <canvas>, <iframe> <table> CSS Definieert de document opmaak div, .class, #id :pseudoclass Background Spacing Borders Font and Text Positioning Printing JavaScript Defineert functionaliteit Reactie op HTML object event Document ready Onclick Onhover … Prototypes
JavaScript Basics - structure function myFunction() { var x=""; var time=new Date().getHours(); if (time<20) x="Good day"; else x="Good evening"; return x; } document.getElementById("demo").innerHTML="Hello"; try { ... } catch(err) var firstname; firstname="Hege"; document.write(firstname); for (i=0;i<5;i++) { ... } var Circle = function(radius) { this.radius = radius; } Circle.prototype.area = function() return Math.PI*this.radius*this.radius; var a = new Circle(3), b = new Circle(4); a.area().toFixed(2); //28.27 b.area().toFixed(2); //50.27 alert("Hello! I am an alert box!"); switch (d) { case 0: x="Sunday"; break; case 1: x="Monday"; }
JavaScript Basics - JSON JSON staat voor JavaScript Object Notatie Het wordt veel gebruikt om objecten van een back-end (WCF services, ASMX services, …) naar front-end (AJAX) te sturen. [ { "Naam": "JSON", "Type": "Gegevensuitwisselingsformaat", "isProgrammeertaal": false, }, { "Naam": "JavaScript", "Type": "Programmeertaal", "isProgrammeertaal": true, "Jaar": 1995 } ] data.Naam data.Type data.isProgrammeertaal data.Jaar
TypeScript – Status TypeScript biedt modules, classes, interfaces en type annotaties (strong typing) – ECMA 6 Momenteel op versie 0.9.1 Installatie: http://www.typescriptlang.org In Visual Studio wordt een template geleverd voor een web app, maar is ook te gebruiken binnen Windows Store apps (tijdelijk met workarounds).
Libraries - jQuery jQuery is een extensie op JavaScript voor optimalizatie van DOM interactie en AJAX. *Selectors (in CSS syntax) Effecten (sliding, fading, …) *Event handling *DOM manipulatie AJAX
Libraries – jQuery UI Een library gebouwd op jQuery, het levert een set interacties, effecten en widgets voor UI *Draggable en Droppable Resizable Dialog (=lightbox/overlay) Accordion, datepicker, autocomplete, menu Custom checkbox, radiobutton, textbox, …
Libraries – En vele anderen MooTools & YUI – Tegenhangers van jQuery QUnit – js unit testing jQuery mobile – mobile support Backbone.js – MVC framework in JavaScript Modernizr – HTML5 / CSS3 feature detection Jsplumb – connector library jqPlot – graph plotting JavaScrypt – encryptie library Jsvalidate – form validation jQuery Tools – standaard componenten voor overlay, scrollable, …
Identity Management – WS-federation stack Web 3.0 Identiteiten spelen een centrale rol Internet verwordt een Service-Oriented Architecture Apps bieden de interface om diensten te consumeren Identity Management – WS-federation stack Windows Azure Web apps + Windows 8 apps Directory Services?
Web 3.0 ID ID ID ID ID Directory dir dir dir Internet Services Company Home …
WebGL Een JavaScript API voor rendering van interactieve 2D/3D graphics binnen de web browser zonder gebruik van plug-ins Ontstond als experiment bij Mozilla in 2006 Initialiseer het canvas HTML object als WebGL canvas en gebruik OpenGL ES 2.0 syntax binnen JavaScript Internet Explorer 11 / Windows 8.1 ondersteunt WebGL
Concerns JavaScript compileert niet, het is altijd mogelijk de broncode te achterhalen – ook uit Windows Store apps Clientside validatie is eenvoudig te omzeilen – Maak de juiste keuze wat clientside vs serverside te implementeren Het is een geïnterpreteerde taal, en heeft daarmee performance implicaties