Presentatie: De evolutie van JavaScript

Report
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
DirectX / OpenGL
C
C++
.NET
WIN32 API
- Communication
- Devices
- Graphics
- Control Objects
Windows Explorer
DirectX
HTA
Web
BrowseUI
MSHTML
- Trident Layout Engine
- HTML / CSS Parser
- DOM
- Active Document
Internet Explorer
Windows Kernel Services
C
C++
WebGL
C#
VB
HTML
WinRT API
- Communication
- Devices
- Graphics
Trident Engine
Windows Runtime
JavaScript Historie
November
1996 –
Netscape
biedt
JavaScript
aan ECMA
voor
standaardis
atie
Maart
1996 Netscape
lanceert
JavaScript
Augustus
1996 Microsoft
IE met
JScript
1999 –
Microsoft
embed
JScript in
Windows
Script Host
Juni 1997 –
ECMA
publiceert
ECMAScrip
t
2005 –
Uitbreiding
Arrays
2000 –
Exception
Handling
Huidig –
JavaScript
gestandaar
diseerd
ECMA-262
(5.1)
JavaScript Basics - HTML
HTML
Definieert de document
structuur
CSS
Definieert de document
opmaak
JavaScript
Defineert functionaliteit
-
-
<html>
<head>, <body>
<form>, <input>
<article>, <section>
<div>, <p>
<img>, <video>,
<audio>
<canvas>, <iframe>
<table>
-
div, .class, #id
:pseudoclass
-
Background
Spacing
Borders
Font and Text
Positioning
Printing
-
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);
try
{ ... }
catch(err)
{ ... }
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20) x="Good day";
else x="Good evening";
return x;
}
for (i=0;i<5;i++) { ... }
alert("Hello! I am an alert box!");
switch (d)
{
case 0:
x="Sunday";
break;
var Circle = function(radius)
{
this.radius = radius;
}
Circle.prototype.area = function()
{
return Math.PI*this.radius*this.radius;
}
case 1:
x="Monday";
break;
}
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.
[{
"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, …
Web 3.0
• Identiteiten spelen een centrale rol
Identity Management – WS-federation stack
• Internet verwordt een Service-Oriented
Architecture
Windows Azure
• Apps bieden de interface om diensten te
consumeren
Web apps + Windows 8 apps
Directory Services?
Web 3.0
ID
ID
ID
ID
ID
Directory
dir
Internet Services
Company
dir
dir
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

similar documents