150 likes | 282 Views
De evolutie van JavaScript. Edwin van der Thiel Technisch Specialist , Sogeti. Edwin.van.der.thiel@sogeti.nl www.sogeti.nl. Agenda. Verleden Systeem architectuur JavaScript historie Heden JavaScript basics Enterprise JavaScript - TypeScript Libraries Toekomst Web 3.0 WebGL
E N D
De evolutie van JavaScript Edwin van der Thiel Technisch Specialist, Sogeti Edwin.van.der.thiel@sogeti.nl www.sogeti.nl
Agenda • Verleden • Systeem architectuur • JavaScript historie • Heden • JavaScript basics • Enterprise JavaScript - TypeScript • Libraries • Toekomst • Web 3.0 • WebGL • Concerns
Systeem Architectuur DirectX / OpenGL DirectX WebGL C C++ C# VB HTML C C++ .NET HTA Web Windows Explorer Internet Explorer Windows Runtime BrowseUI WIN32 API - Communication - Devices - Graphics - Control Objects WinRT API - Communication - Devices - Graphics MSHTML - Trident Layout Engine - HTML / CSS Parser - DOM - Active Document Trident Engine Windows Kernel Services
JavaScript Basics - HTML • 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 • Defineertfunctionaliteit • Reactie op HTML object event • Document ready • Onclick • Onhover • … • Prototypes
JavaScript Basics - structure function myFunction() { varx=""; vartime=new Date().getHours(); if (time<20) x="Good day"; else x="Good evening"; return x; } document.getElementById("demo").innerHTML="Hello"; try { ... } catch(err) { ... } varfirstname; 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"; break; }
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 • Customcheckbox, 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 – graphplotting • JavaScrypt – encryptie library • Jsvalidate – form validation • jQuery Tools – standaard componenten voor overlay, scrollable, …
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 • EenJavaScript API voorrendering van interactieve 2D/3D graphics binnen de web browser zondergebruik van plug-ins • Ontstondals experiment bij Mozilla in 2006 • Initialiseer het canvas HTML object alsWebGL canvas en gebruik OpenGL ES 2.0 syntax binnen JavaScript • Internet Explorer 11 / Windows 8.1 ondersteuntWebGL
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 clientsidevs serverside te implementeren • Het is een geïnterpreteerde taal, en heeft daarmee performance implicaties