Development of Internet Applications jQuery, TypeScript, LESS 5 Development of Internet Applications jQuery, TypeScript, LESS Ing. Jan Janoušek

TypeScript New language from Microsoft – transpiler to JS. Part of VisualStudio 2013 update 3 and newer. Other officialy supported IDEs are VS Code, WebStorm, Atom, Sublime Text, or Eclipse. „Every JavaScript code is TypeScript code“ The result is always JS code, however development is effective and easy (VisualStudio) Syntax and constructors with respect to ECMAScript 6+ Adds type definition to JS Most of features will be available in new versions of JavaScript (except data types). Repository of definition files: https://github.com/borisyankov/DefinitelyTyped

TypeScript features Better static code analysis (because of type definition). Classes and inheritance Modules / namespaces Generic data types Support Duck-typing – type is determind by interface And more (destructuring assignment, const, for .. of, …)

TypeScript

LESS CSS preprocesor – transcompile LESS code to plain CSS „CSS code is LESS code“ Increase effectivity of development and maintainbility Supported by most of IDEs (mostly using extensions). New posibilities compared to CSS: Variables Mixins Nested rules Math operations http://lesscss.org

Other frameworks a extensions Javascript frameworks http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks Dojo, Prototype, Mootols, … Javascript transpilers Dart - https://www.dartlang.org/ CoffeScript - http://coffeescript.org/ CSS preprocesors SASS - http://sass-lang.com/ Stylus - http://learnboost.github.io/stylus/ Front-end frameworks Twitter Bootstrap - http://getbootstrap.com/ Foundation - http://foundation.zurb.com/ Specialities Node.js - http://nodejs.org/

jQuery JavaScript library Current version: 3.1.1 (1.12.4 – IE 6,7,8) Size: ~84kB Basic syntax: function $ or jQuery Main use cases Manipulation with DOM Event handling Animation Communication (AJAX, JSON) Using anonymous functions Plugins and extensions

http://jquery.com/download/

jQuery UI Extending library for jQuery Interactive UI components Set of UI items Support for themes http://jqueryui.com/demos/ http://jqueryui.com/demos/

jQuery Mobile Extending library for jQuery UI Use jQuery UI Optimized for mobile deives. Uniform design through platforms Support for themes Based on data-* attributes (no custom JS is needed). Example of data-* attributes usage: http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_leftclose Demos: http://demos.jquerymobile.com/1.4.5/ http://www.rewferguson.com/files/2011-07-19/