1 / 15

De evolutie van JavaScript

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

nen
Download Presentation

De evolutie van JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. De evolutie van JavaScript Edwin van der Thiel Technisch Specialist, Sogeti Edwin.van.der.thiel@sogeti.nl www.sogeti.nl

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

  3. 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

  4. JavaScript Historie

  5. 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

  6. 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; }

  7. 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

  8. 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).

  9. 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

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

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

  12. 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?

  13. Web 3.0 ID ID ID ID ID Directory dir dir dir … Internet Services Company Home

  14. 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

  15. 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

More Related