New features: classes, generators, iterators, etc. Telerik Academy Plus JavaScript.Next.

Slides:



Advertisements
Similar presentations
Windows Basic and Dynamic Disk Borislav Varadinov Telerik Software Academy academy.telerik.com System Administrator Marian Marinov CEO of 1H Ltd.
Advertisements

Hybrid or Native?! Doncho Minkov Telerik Software Academy Senior Technical Trainer
HTML Forms, GET, POST Methods Tran Anh Tuan Edit from Telerik Academy
Make swiftly iOS development Telerik Academy Telerik Academy Plus.
Amazon S 3, App Engine Blobstore, Google Cloud Storage, Azure Blobs Svetlin Nakov Telerik Software Academy academy.telerik.com.
RPN and Shunting-yard algorithm Ivaylo Kenov Telerik Software Academy academy.telerik.com Technical Assistant
Shortest paths in edge-weighted digraph Krasin Georgiev Technical University of Sofia g.krasin at gmail com Assistant Professor.
Telerik Software Academy Telerik School Academy.
Coding JavaScript the expressive way Learning & Development Telerik Software Academy.
Asynchronous Programming with C# and WinRT
Unleash the Power of JavaScript Tooling Telerik Software Academy End-to-end JavaScript Applications.
Touch and Gestures with Xamarin Forms
Character sequences, C-strings and the C++ String class, Working with Strings Learning & Development Team Telerik Software Academy.
Hybrid or Native?! Doncho Minkov Telerik Software Academy Senior Technical Trainer
Done already for your convenience! Telerik School Academy Unity 2D Game Development.
Processing Sequences of Elements Telerik School Academy C# Fundamentals – Part 1.
With Mocha and Karma Telerik Academy Telerik Software Academy.
C# Fundamentals – Part I
Welcome to the JSON-stores world Telerik Software Academy Databases.
The Business Plan and the Business Model Margarita Antonova Volunteer Telerik Academy academy.telerik.com Business System Analyst Telerik Corporation.
What are ADTs, STL Intro, vector, list, queue, stack Learning & Development Team Telerik Software Academy.
Making JavaScript code by template! Learning & Development Team Telerik Software Academy.
Svetlin Nakov Telerik Software Academy academy.telerik.com Manager Technical Training Who, What, Why?
Access to known folders, using pickers, writing to and reading from files, caching files for future access George Georgiev Telerik Software Academy academy.telerik.com.
Processing Matrices and Multidimensional Tables Svetlin Nakov Telerik Software Academy academy.telerik.com Technical Trainer
Learning & Development Telerik Software Academy.
Telerik Software Academy ASP.NET Web Forms.
Classical OOP in JavaScript Classes and stuff Telerik Software Academy
Optimization problems, Greedy Algorithms, Optimal Substructure and Greedy choice Learning & Development Team Telerik Software.
Using Selenium for Mobile Web Testing Powered by KendoUI Telerik QA Academy Atanas Georgiev Senior QA Engineer KendoUI Team.
NoSQL Concepts, Redis, MongoDB, CouchDB Svetlin Nakov Telerik Software Academy academy.telerik.com Manager Technical Training
Throwing and Catching Exceptions Tran Anh Tuan Edit from Telerik Software Academy
Past, Present and Future Nikolay Kostov Telerik Software Academy academy.telerik.com Team Lead, Senior Developer and Trainer
Loops, Conditional Statements, Functions Tran Anh Tuan Edit from Telerik Academy
Telerik Software Academy ASP.NET Web Forms.
Private/Public fields, Module, Revealing Module Learning & Development Team Telerik Software Academy.
Building Data-Driven ASP.NET Web Forms Apps Telerik Software Academy ASP.NET Web Forms.
Course Introduction Svetlin Nakov Telerik Software Academy academy.telerik.com Manager Technical Training
Telerik Software Academy End-to-end JavaScript Applications.
Planning and Tracking Software Quality Yordan Dimitrov Telerik Corporation Team Leader, Team Pulse, Team Leader, Team Pulse, Telerik Corporation,
Closures, Function Scope, Nested Functions Learning & Development Team Telerik Software Academy.
What you need to know Ivaylo Kenov Telerik Corporation Telerik Academy Student.
Data binding concepts, Bindings in WinJS George Georgiev Telerik Software Academy academy.telerik.com Technical Trainer itgeorge.net.
Pavel Kolev Telerik Software Academy Senior.Net Developer and Trainer
Objects, Properties, Primitive and Reference Types Learning & Development Team Telerik Software Academy.
When and How to Refactor? Refactoring Patterns Alexander Vakrilov Telerik Corporation Senior Developer and Team Leader.
Free Training and Job for Software Engineers Svetlin Nakov, PhD Manager Technical Training Telerik Corp. Telerik Software Academy.
Free Training and Job for Software Engineers Svetlin Nakov, PhD Manager Technical Training Telerik Corp. Telerik Software Academy.
Access to known folders, using pickers, writing to and reading from files, caching files for future access George Georgiev Telerik Software Academy academy.telerik.com.
Doing the Canvas the "easy way"! Learning & Development Telerik Software Academy.
Creating and Running Your First C# Program Svetlin Nakov Telerik Software Academy academy.telerik.com Manager Technical Training
Course Overview Doncho Minkov Telerik Software Academy Technical Trainer
Data Types, Primitive Types in C++, Variables – Declaration, Initialization, Scope Telerik Software Academy academy.telerik.com Learning and Development.
The past, the present, the future Learning & Development Team Telerik Software Academy.
Connecting, Queries, Best Practices Tran Anh Tuan Edit from Telerik Software Academy
Processing Sequences of Elements Telerik Software Academy C# Fundamentals – Part 2.
Telerik JavaScript Framework Telerik Software Academy Hybrid Mobile Applications.
Telerik Software Academy Databases.
Things start to get serious Telerik Software Academy JavaScript OOP.
Learning & Development Mobile apps for iPhone & iPad.
Processing Matrices and Multidimensional Tables Telerik Software Academy C# Fundamentals – Part 2.
Nikolay Kostov Telerik Software Academy academy.telerik.com Team Lead, Senior Developer and Trainer
Functions and Function Expressions Closures, Function Scope, Nested Functions Telerik Software Academy
Implementing Control Logic in C# Svetlin Nakov Telerik Software Academy academy.telerik.com Manager Technical trainer
Inheritance, Abstraction, Encapsulation, Polymorphism Telerik Software Academy Mobile apps for iPhone & iPad.
Mocking tools for easier unit testing Telerik Software Academy High Quality Code.
Creating and Initializing Arrays, Accessing Elements, Multiple Dimensions Learning & Development Team Telerik Software Academy.
What why and how? Telerik School Academy Unity 2D Game Development.
Windows Security Model Borislav Varadinov Telerik Software Academy academy.telerik.com System Administrator
Definition, Constructors, Methods, Access Modifiers, Static/Instance members, Learning & Development Team Telerik Software Academy.
Presentation transcript:

New features: classes, generators, iterators, etc. Telerik Academy Plus JavaScript.Next

 JavaScript History  The ECMAScript standard  Using JavaScript.Next  Running JavaScript.Next in the browsers  Chrome Harmony, Firefox Nightly  Compiling to JS 5 – Traceur, Babel  ECMAScript 6 features  Variables: var, let, const  OOP: classes, inheritance, super, get/set  Functions: generators, iterators, arrow functions, comprehensions, for-of

 ECMAScript 6 features:  Data Structures: set/weakset, map/weakmap  Async operations: built-in promises  Modules: imports, exports, compitability  Objects: computed properties, shorthand properties, Object.is(), Object.assign(), proxies  Others: templates, Math and Number extensions

 JavaScript is a front-end scripting language developed by Netscape for dynamic content  Lightweight, but with limited capabilities  Can be used as object-oriented language  Embedded in your HTML page  Interpreted by the Web browser  Client-side, mobile and desktop technology  Simple and flexible  Powerful to manipulate the DOM 5

Running JS next today

 There are a few ways to use JavaScript.next today  Enable tags in Chrome and Firefox  Compile to JavaScript 5 using Traceur or Babel  A compatibility table for ES6 support can be found at table/es6/ table/es6/ table/es6/

 ES6 introduces new ways to declare variables:  let – creates a scope variable  Accessible only in its scope for(let number of [1, 2, 3, 4]){ console.log(number); console.log(number);} //accessing number here throws exception  const – creates a constant variable  Its value is read-only and cannot be changed const MAX_VALUE = 16; MAX_VALUE = 15; // throws exception

Live Demo

 The for-of loop iterates over the values  Of an array function* generator(maxValue){ for(let i = 0; i < maxValue; i+=1){ for(let i = 0; i < maxValue; i+=1){ yield i; yield i; }} let iter = generator(10); for(let val of iter()){ console.log(val); console.log(val);} let sum = 0; for(let number of [1, 2, 3]) sum+= number; sum+= number;  Of An iteratable object

Live Demo

 ES6 supports templated strings  i.e. strings with placeholders: let people = [new Person('Doncho', 'Minkov'), … ]; for(let person of people){ log(`Fullname: ${person.fname} ${person.lname}`); log(`Fullname: ${person.fname} ${person.lname}`);}  Templates escape the strings  They do not call eval

The way of OOP in ES6

 ES6 introduces classes and a way to create classical OOP class Person extends Mammal{ constructor(fname, lname, age){ constructor(fname, lname, age){ super(age); super(age); this._fname = fname; this._fname = fname; this._lname = lname; this._lname = lname; } get fullname() { get fullname() { //getter property of fullname //getter property of fullname } set fullname(newfullname) { set fullname(newfullname) { //setter property of fullname //setter property of fullname } // more class members… // more class members…}

 ES6 introduces classes and a way to create classical OOP class Person extends Mammal{ constructor(fname, lname, age){ constructor(fname, lname, age){ super(age); super(age); this._fname = fname; this._fname = fname; this._lname = lname; this._lname = lname; } get fullname() { get fullname() { //getter property of fullname //getter property of fullname } set fullname(newfullname) { set fullname(newfullname) { //setter property of fullname //setter property of fullname } // more class members… // more class members…} Constructor of the class

 ES6 introduces classes and a way to create classical OOP class Person extends Mammal{ constructor(fname, lname, age){ constructor(fname, lname, age){ super(age); super(age); this._fname = fname; this._fname = fname; this._lname = lname; this._lname = lname; } get fullname() { get fullname() { //getter property of fullname //getter property of fullname } set fullname(newfullname) { set fullname(newfullname) { //setter property of fullname //setter property of fullname } // more class members… // more class members…} Getters and setters Constructor of the class

Live Demo

Also called LAMBDA expressions

 Arrow functions easify the creation of functions:

numbers.sort(function(a, b){ return b – a; return b – a;});

 Arrow functions easify the creation of functions: numbers.sort(function(a, b){ return b – a; return b – a;}); numbers.sort((a, b) => b – a); Becomes

 Arrow functions easify the creation of functions: numbers.sort(function(a, b){ return b – a; return b – a;}); numbers.sort((a, b) => b – a); var fullnames = people.filter(function (person) { people.filter(function (person) { return person.age >= 18; return person.age >= 18; }).map(function (person) { }).map(function (person) { return person.fullname; return person.fullname; }); }); Becomes

 Arrow functions easify the creation of functions: numbers.sort(function(a, b){ return b – a; return b – a;}); numbers.sort((a, b) => b – a); var fullnames = people.filter(function (person) { people.filter(function (person) { return person.age >= 18; return person.age >= 18; }).map(function (person) { }).map(function (person) { return person.fullname; return person.fullname; }); }); var fullnames2 = people.filter(p => p.age >= 18) people.filter(p => p.age >= 18).map(p => p.fullname);.map(p => p.fullname); Becomes Becomes

Live Demo

 ES6 adds a new feature (rule) to the way of defining properties:  Instead of let name = 'Doncho Minkov', age = 25; age = 25; let person = { name: name, name: name, age: age age: age};  We can do just: let name = 'Doncho Minkov'; let person = { name, name, age age};

Live Demo

 Destructuring assignments allow to set values to objects in an easier way:  Destructuring assignments with arrays: var [a,b] = [1,2]; //a = 1, b = 2 var [x,, y] = [1, 2, 3] // x = 1, y = 3 var [first, second,...rest] = people;  Swap values: [x, y] = [y, x]  Result of method: function get(){ return [1, 2, 3]; } var [x, y] = get();

 Destructuring assignments allow to set values to objects in an easier way:  Destructuring assignments with objects: var person = { name: 'Doncho Minkov', name: 'Doncho Minkov', address: { address: { city: 'Sofia', city: 'Sofia', street: 'Aleksander Malinov' street: 'Aleksander Malinov' }}; var {name, address: {city}} = person;

Live Demo

 ES6 supports maps and sets natively  They do pretty much the same as associative arrays, but in cleaner way: let names = new Set(); names.add('Doncho');names.add('Nikolay');names.add('Ivaylo');names.add('Evlogi'); names.add('Doncho'); // won't be added

Live Demo

 ES6 supports modules  A way to write JavaScript in different files  Each file has its own scope (not the global)  Each file decides what to export from its module  Export the objects you want from a module: module.exports = { Person: Person, Person: Person, Mammal: Mammal Mammal: Mammal}  To use the module in another file: import classes from './persons' import {Mammal, Person} form '.persons' persons.js

Live Demo

форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен SEO курс - оптимизация за търсачки уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop уроци по програмиране и уеб дизайн за ученици ASP.NET MVC курс – HTML, SQL, C#,.NET, ASP.NET MVC безплатен курс "Разработка на софтуер в cloud среда" BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране, книги – безплатно от Наков безплатен курс "Качествен програмен код" алго академия – състезателно програмиране, състезания ASP.NET курс - уеб програмиране, бази данни, C#,.NET, ASP.NET курсове и уроци по програмиране – Телерик академия курс мобилни приложения с iPhone, Android, WP7, PhoneGap free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране