De evolutie van JavaScript

De evolutie van JavaScript Edwin van der Thiel Technisch Specialist,
Sogeti [email protected] www.sogeti.nl

Agenda • Verleden – Systeem architectuur – JavaScript historie •
Heden – JavaScript basics – Enterprise JavaScript - TypeScript – Libraries • Toekomst – Web 3.0 – WebGL • Concerns

Systeem Architectuur Windows Kernel Services Windows Explorer Windows Runtime C
C++ WinRT API - Communication - Devices - Graphics Internet Explorer Trident Engine WIN32 API - Communication - Devices - Graphics - Control Objects MSHTML - Trident Layout Engine - HTML / CSS Parser - DOM - Active Document BrowseUI HTA Web .NET C C++ C# VB HTML DirectX DirectX / OpenGL WebGL

JavaScript Historie Maart 1996 - Netscape lanceert JavaScript Augustus 1996
- Microsoft IE met JScript November 1996 – Netscape biedt JavaScript aan ECMA voor standaardis atie Juni 1997 – ECMA publiceert ECMAScrip t 1999 – Microsoft embed JScript in Windows Script Host 2000 – Exception Handling 2005 – Uitbreiding Arrays Huidig – JavaScript gestandaar diseerd ECMA-262 (5.1)

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 Defineert functionaliteit - Reactie op HTML object event - Document ready - Onclick - Onhover - … - Prototypes

JavaScript Basics - structure document.getElementById("demo").innerHTML="Hello"; var firstname; firstname="Hege"; document.write(firstname); function
myFunction() { var x=""; var time=new Date().getHours(); if (time<20) x="Good day"; else x="Good evening"; return x; } switch (d) { case 0: x="Sunday"; break; case 1: x="Monday"; break; } alert("Hello! I am an alert box!"); try { ... } catch(err) { ... } 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

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. data.Naam data.Type data.isProgrammeertaal data.Jaar [ { "Naam": "JSON", "Type": "Gegevensuitwisselingsformaat", "isProgrammeertaal": false, }, { "Naam": "JavaScript", "Type": "Programmeertaal", "isProgrammeertaal": true, "Jaar": 1995 } ]

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, …

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 Internet Services Company Home … ID ID ID
ID Directory dir dir dir ID

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

De evolutie van JavaScript

De evolutie van JavaScript

devNetNoord

More Decks by devNetNoord

Other Decks in Technology

Featured

Transcript

De evolutie van JavaScript Edwin van der Thiel Technisch Specialist,

Agenda • Verleden – Systeem architectuur – JavaScript historie •

Systeem Architectuur Windows Kernel Services Windows Explorer Windows Runtime C

JavaScript Historie Maart 1996 - Netscape lanceert JavaScript Augustus 1996

JavaScript Basics - HTML HTML Definieert de document structuur -

JavaScript Basics - structure document.getElementById("demo").innerHTML="Hello"; var firstname; firstname="Hege"; document.write(firstname); function

JavaScript Basics - JSON • JSON staat voor JavaScript Object

TypeScript – Status TypeScript biedt modules, classes, interfaces en type

Libraries - jQuery jQuery is een extensie op JavaScript voor

Libraries – jQuery UI Een library gebouwd op jQuery, het

Libraries – En vele anderen • MooTools & YUI –

Web 3.0 • Identiteiten spelen een centrale rol • Internet

Web 3.0 Internet Services Company Home … ID ID ID

WebGL • Een JavaScript API voor rendering van interactieve 2D/3D

Concerns • JavaScript compileert niet, het is altijd mogelijk de