Modern JavaScript Presentation outline
- Introduction - JavaScript vs Java - Modern JavaScript - jQuery : the most popular library - Discovering Google Closure - Conclusion - Questions JavaScript : hello world JavaScript : introduction JavaScript: -The most popular client-side scripting language -Designed to introduce the web interactivity: -Read and create HTML elements -React to events -Validate data -…and more……. -Development considerations: -Compatibility -Accessibility -Security
…but also the most misunderstood programming language JavaScript : misunderstandings Misunderstandings come from:
-Version -Design issues: -Semicolon automatic insertion -Global variables -Reserved words -Designers or programmers ? -It has C-like syntax, is it a procedural language ? -Is JavaScript Object-Oriented ? -Name : JavaScript is Java ? JavaScript vs Java
http://coding.smashingmagazine.com JavaScript vs Java JavaScript Java Interpreted (Text-based) Compiled (bytecode)
Loose typing Strong typing
Mostly browser dependent General-purpose language
Function-based scoping Block-based scoping
Prototype-based Object-oriented JavaScript : function-based scope JavaScript Function Scope: -Scope = where variables and functions are accessible = in what context they are executed JavaScript : prototype JavaScript prototype: Possibility to share implementation across similar objects -Is an object from which other objects inherit properties -Every object has a prototype (except some system objects) -Used for the storage of methods, default state and shared properties of objects -Use less memory -Enable some design patterns … myObject.prototype.myMethod(){ … JavaScript : prototype JavaScript prototype sample:
Without prototype
With prototype why „Java” in JavaScript name ?
MARKETING deal ?
Mocha = originally code name (Netscape) LiveScript = official name (shipped in beta Netscape Navigator 2.0) JavaScript = official name in the final version of Netscape web browser : -To give the impression that is related to the Java -Is it a result of a Netscape-Sun deal to bundle Netscape browser with Sun's Java runtime ? JScript = Microsoft’s name to avoid trademark issues ECMAScript = scripting language standardization including JavaScript, JScript and ActionScript JavaScript : today Modern JavaScript : -Keep JavaScript in external files -Use good script tag
-Keep your code unobtrusive
-Use framework(s) -Unit test / „Compile” / Compress -Document your code JavaScript frameworks and libraries JavaScript : jQuery jQuery: -Cross-browser JavaScript library -Released in 2006 -Free and open source -Used by ½ of the 10000 most visited websites -Extendable by jQuery UI and jQuery Mobile -jQuery strengths: -Easy to use -Fast -Light (~30Kb compressed) -Big community and good documentation -DOM selectors -Extra plugins JavaScript : jQuery Used by: JavaScript : jQuery Powerful selector: Get an element and do something to it $()
http://codylindley.com/jqueryselectors/ JavaScript : jQuery Powerful selector: $(’’div’’)
Title
please clickhere
Title
please clickhere
Title
please clickhere
http://vikaskhera.wordpress.com/ JavaScript : jQuery Powerful action: $(’’#content’’).hide(‘slow’,[callback]);
Title
please clickhere
Title
http://vikaskhera.wordpress.com/ JavaScript : jQuery UI jQuery UI: -Built on top of jQuery to provide: -Interaction -Animation -Advanced effects and widgets JavaScript : jQuery plugins jQuery plugins : -Easy configuration and integration -Hundreds available for free
JavaScript : Google Closure Closure Closure Compiler Linter
Closure Closure Library Templates http://code.google.com/closure/ JavaScript : Closure Tools
Used in: JavaScript : Closure Library
Closure Library: -Cross-browser JavaScript library -It contains -UI widgets (e.g. rich-text editor) -Controls -DOM manipulators -Server communication functionalities -Data structures -Unit testing -Intended to be used with the Closure Compiler -OO support (for classes and inheritance) -Emphasis on performance and readability -Free and open source -Big library = 400 files JavaScript : Closure Library
Closure Library sample: JavaScript : Closure Compiler
Closure Compiler: -Build rich web applications in JavaScript -Make JavaScript download and run faster -Compile from JavaScript to JavaScript -Parse, analyze, remove dead code -Rewrite and Minimize -Check for : syntax, types and documentation -Warn about common JavaScript pitfalls -Come with a Firebug extension (Closure Inspector) How to use it: -as Java application -as Google web application -as RESTful API http://code.google.com/closure/compiler/ JavaScript : JsDoc annotations
JsDoc: -JavaScript source code documentation (JavaDoc-like syntax) -Work with Closure Compiler, Closure Linter, Eclipse, Mozille, .. -Can turn JavaScript into strongly typed OO language -Produce a documentation output (e.g. in HTML) JsDoc sample: JavaScript : Closure Compiler
Compiler sample #1: Input code JavaScript : Closure Compiler Compiler sample #2: Input code Output code
-Removed comments, whitespaces and semi-colons -Removed dead code -Smaller file (saved 91.42% off the original size) JavaScript : Closure Linter
Closure Linter: -Code quality check -Style issues -Missing JsDoc annotations -Ensure that code follows Google’s guideline -Automatically fixes some issues
Closure Linter output:
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml jQuery or Google Closure ?
jQuery Closure Library Library + Tools
Quick integration Complexe integration
Small community Big community/documentation /documentation Big size (up to 30MB Small size (230kb uncompressed) uncompressed) For small-medium projects For medium-big projects Conclusion
-Learn and write modern JavaScript! -Use frameworks/libraries -Be ready for HTML5 APIs -Use tools for development (e.g. Eclipse) -Ensure code quality -Stick to some guidelines -Test / „Compile” / Compress -Document your code Thank you