This document discusses Reactive programming and Angular 2 components. It introduces Observables and how they can be used to handle asynchronous data streams in a reactive way. It provides examples of creating Observables from events, iterables, and intervals. It also discusses how Observables can be used in Angular 2 to reactively process and display asynchronous data.
This document discusses ECMAScript 2015 (ES2015), also known as ES6. It provides examples of new ES2015 features like arrow functions, template literals, classes, and modules. It also discusses how to set up a development environment to use ES2015, including transpiling code to ES5 using Babel, linting with Eslint, testing with Mocha, and generating coverage reports with Istanbul. The document emphasizes that while ES2015 is fun to explore, proper tooling like linting and testing is needed for serious development. It concludes by noting ES2015 marks a transition and thanks the audience.
Asynchronous programming done right - Node.jsPiotr Pelczar
This document discusses asynchronous programming and avoiding race conditions. It covers how asynchronous actions allow the main program flow to continue processing without blocking on I/O. It also discusses how asynchronous programming works with callbacks and promises rather than sequential execution. It provides examples of using libraries like Async to control asynchronous flows and common pitfalls to avoid like double callbacks and unexpected asynchronous behavior.
The document provides an overview of JavaScript fundamentals, common patterns, and an introduction to Node.js. It discusses JavaScript data types and operators, variable scoping, objects and classes. It also covers jQuery optimization techniques like selector caching and event handling. For Node.js, it demonstrates how to create an HTTP server, manage dependencies with npm, build an Express server, and use middleware.
The document summarizes the key features of ES6 (ECMAScript 2015), the next version of JavaScript. It discusses new features like block scoping with let and const, arrow functions, classes, enhanced object literals, template strings, and promises. It also covers iterators and generators, which allow iterable objects to be looped over and asynchronous code to be written more cleanly. The presentation provides examples to illustrate how developers can take advantage of these new language features in their code.
Unit testing JavaScript code with Jasmine allows developers to test functionality in isolation through matchers, spies, and asynchronous handling. Key benefits include cheaper QA, better documentation, improved code quality, and easier debugging. While some are deterred by complex asynchronous code or small projects, unit testing pays off through early bug detection and confidence that features work as intended.
AngularJS with TypeScript and Windows Azure Mobile ServicesRainer Stropek
In the coming two weeks I will do a series of talks at various conferences in Austria and Germany. I will speak about AngularJS, TypeScript, and Windows Azure Mobile Services. In this blog post I publish the slides and the sample code.
This document provides information about using MapKit and displaying map data in iOS applications. It discusses displaying maps, adding annotations and overlays like polygons and circles, handling gestures, and loading KML data. It includes code snippets in Objective-C for creating map views, annotations, overlays from KML, handling gestures, and displaying annotation views with custom images.
This document discusses testing Backbone applications with Jasmine. It provides examples of how to test models, views, user interactions, and more. Key points covered include:
- Using Behavior Driven Development (BDD) style tests with Jasmine's describe and it blocks to test app behaviors.
- Spying on and mocking functions like jQuery's ajax call to test view logic without external dependencies.
- Testing models by calling methods and checking property values change as expected.
- Testing views by triggering events and checking models and DOM update appropriately.
- The jasmine-jquery plugin allows testing user interactions like clicks directly.
The document discusses using the Mocha testing framework for JavaScript. It covers Mocha features like BDD/TDD syntax, using assertion libraries like Chai, and testing asynchronous code. It also provides examples of setting up tests in Node.js and the browser using Mocha and integrating tests with build tools like Grunt and Gulp.
In JS: CLASS <=> Constructor FN
new FN() => FN() { this }
FN = CLASS (FN = FN, FN = DATA)
Objects
Prototype / __proto__
Inheritence
Rewriting / Augmenting
built in objects
This document discusses JavaScript unit testing with Jasmine. It provides an overview of Jasmine's syntax including describes, contexts, matches, spies and stubs. It also discusses tools that can be used with Jasmine like jasmine-jquery for DOM testing and jasmine-given for behavior-driven development style tests.
This document discusses advanced JavaScript techniques. It covers object-oriented JavaScript concepts like references, function overloading, type checking, scopes, closures, object creation, and inheritance. It also discusses performance improvements like scope management, object caching, and optimizing DOM selection. Finally, it discusses debugging and testing JavaScript code as well as distributing JavaScript applications.
Slides from my Lonestar Ruby Conf 2011 presentation.
*** Video of presentation: http://confreaks.com/videos/2531-lsrc2011-testing-javascript-with-jasmine ***
Agenda:
- Briefly cover why you should unit test
- Discuss what Jasmine is and isn't
- Show syntax with comparisons to RSpec
- Jasmine with:
- Vanilla JavaScript
- Jasmine with jQuery
- Jasmine with Ruby (not Rails)
- Jasmine with Rails
- Evergreen
- capybara-webkit
- Where does CoffeeScript, node.js, etc. fit in?
- Other helpful libraries/Wrap-up
Testing your javascript code with jasmineRubyc Slides
This document discusses using Jasmine to test JavaScript code. It describes Jasmine as a behavior driven development framework for JavaScript testing. It then provides instructions on installing Jasmine, creating spec files to contain test cases, and including source code files. The document uses an example of testing a master-slave checkbox relationship to demonstrate how to set up tests, DOM elements, and code the tests against the actual code implementation.
Unit testing JavaScript using Mocha and NodeJosh Mock
This document discusses unit testing JavaScript code using Mocha and Node.js. It covers what unit testing is, why it is important, how to install and use Mocha and Node.js, and how to write testable code and tests. Advanced testing techniques like asynchronous tests, spies, stubs, mocks, fake timers, and testing DOM manipulation with jsdom and jQuery are also explained.
Component lifecycle hooks in Angular 2.0Eyal Vardi
The document discusses Angular change detection and lifecycle hooks. It provides examples of using change detection strategies like OnPush, examples of implementing DoCheck to watch for changes, and summaries of the different lifecycle hooks and when they are called.
AST - the only true tool for building JavaScriptIngvar Stepanyan
The document discusses working with code abstract syntax trees (ASTs). It provides examples of parsing code into ASTs using libraries like Esprima, querying ASTs using libraries like grasp-equery, constructing and transforming ASTs, and generating code from ASTs. It introduces aster, an AST-based code builder that allows defining reusable AST transformations as plugins and integrating AST-based builds into generic build systems like Grunt and Gulp. Aster aims to improve on file-based builders by working directly with ASTs in a streaming fashion.
In this meetup Eyal Vardi will talk about Angular 2.0 architecture. The session will focus on the main parts of Angular 2.0:
Application Bootstrap
Angular Compiler
Hierarchical Injector
Component Lifecycle Hooks
Change Detector
Renderer
Angular 2.0 & jQuery
Dynamic component creation
Tips & Tricks
Each part will be explained and analyzed. In some cases we will dive into Angular 2.0 source code. Our purpose is to list the Do's & Don’ts of Angular.
The session is mostly targeted for developers which already have some experience with Angular 2.0.
The document discusses object-oriented programming concepts in JavaScript. It begins with an overview of how everything in JavaScript is an object, even functions, and how objects have prototypes. It then provides examples of using constructor functions, prototype inheritance, and the extend method to create base classes and subclasses. Config objects and model-view design patterns are also demonstrated. The examples show how to build classes for containers, limited containers, query controllers, and adding map and view capabilities to queries. Resources for further learning are provided at the end.
This document discusses templating systems like Handlebars and Dust for building clean logicless templates in JavaScript. It provides examples of how templating allows cleaner code by separating presentation from logic. Key features covered include expressions, helpers, sections, conditionals, and looping in templates. Partials are also discussed as a way to include other templates. Overall the document serves as an introduction to JavaScript templating using Handlebars and Dust.
This document provides an overview of the Ionic Framework, including:
- Ionic is an open source SDK for building hybrid mobile apps using web technologies like HTML, CSS, and JavaScript.
- It uses Cordova to access native device capabilities and wrap the app in a native shell.
- The document covers installing Ionic, using the Ionic CLI, CSS components, AngularJS directives, and integrating Sass for styling.
This document provides an overview of MVC and Backbone.js frameworks. It discusses how MVC separates an application into models, views, and controllers. Backbone.js is introduced as a lightweight library for building single-page apps that uses an MVC-like structure. Marionette.js is described as a framework built on Backbone that simplifies large app development with modular architecture and reduced boilerplate code. Examples of using these frameworks are also referenced.
This document provides a summary of new features in JavaScript, including let/const block scoping, arrow functions, template strings, classes, generators, async/await, and more. It explains each feature in 1-3 sentences and includes code examples.
Explaining ES6: JavaScript History and What is to ComeCory Forsyth
An overview of some of the history of JavaScript, how it became ECMAScript (and what Ecma is), as well as highlights of the new features and syntax in ES6 aka ES2015.
Originally presented to the New York Public Library on June 4 2015.
This document provides an overview of ES6 features and how to set them up for use in Ruby on Rails applications. It describes key ES6 features such as let and const block scoping, template strings, destructuring assignment, default and rest parameters, loops and generators, enhanced object literals, Maps and Sets, arrow functions, modules, and classes. It then provides instructions for using the sprockets-es6 gem to transpile ES6 code to ES5 for use in Rails, as well as using Node.js and Gulp as an alternative approach.
Here are the slides that I gave for The Arizona Software Community meetup.
http://www.meetup.com/azsoftcom/events/222936544/
This was a gentle introduction to some of the features in EcmaScript 2015 and how and why you may use them.
W roku 2015 świat ujrzała specyfikacja ECMAScript 6. Większość programistów JS na pewno o niej słyszała, ale nie każdy miał przyjemność programować z wykorzystaniem nowych ficzerów oferowanych przez ten język. Postaram się zrobić krótki przegląd nowych ficzerów zarówno pod kątem używalności jak i czyhających pułapek.
Kod źródłowy z prezentacji: https://github.com/UszanowankoProgramowanko/ecmascript6
This document provides an overview of ES6 (ECMAScript 2015) features including: let, const and var; template strings; arrow functions; destructuring; default parameters; rest and spread syntax; iterators; classes; modules; maps, sets, weakmaps and weaksets; promises; and more. It explains each feature and provides code examples to demonstrate usage and differences from ES5. Browser compatibility notes are also included to advise on safe usage of new features across environments.
This contains all the slides used in Silicon Valley Code Camp presentation on Sunday Oct 4, 10:45 session on "Amazing new features in JavaScript". At the end ut also includes the last year presentation covering ES 5
The document summarizes the key features of ECMAScript 6 (ES6), the 2015 version of JavaScript. Some of the major additions covered include let and const for block scoping, arrow functions, template strings, enhanced object properties, the spread operator, destructuring assignments, classes and inheritance, generators, and proxies. ES6 aims to make JavaScript a more robust and feature-rich programming language.
The document defines a LineChart class that extends the Chart class. The LineChart class constructor calls the parent constructor and draws the chart. The draw method builds a line chart from the series data using an SVG library, appends it to the canvas, and adds statistics for each data point by calling the parent addStats method. The getSerieData static method calculates max and average values for a data series. The class is exported for use in other code.
This document discusses exploring ES6 features including classes, modules, arrow functions, template literals, destructuring, iterators, generators, and proxies. It provides code examples of implementing classes, modules, and other features in ES5 syntax compared to the cleaner ES6 syntax. It also discusses setting up a development environment with Node.js, npm, and Babel to use ES6 features and introduces more advanced topics like proxies and generators.
This document summarizes the key new features being introduced in ECMAScript 6 (ES6), also known as Harmony. Some of the major additions include block scope with let and const, classes and modules, iterators and generators, arrow functions, and parameter handling improvements with rest/spread. ES6 is designed to be backwards compatible with ES5 while adding new functionality. Many new features are already being implemented in modern browsers and Node.js using flags or alternative syntax like --harmony for testing purposes today.
Sperasoft talks about several important aspects of ECMAScript6 - language widely used for client-side scripting on the web, in the form of several well-known implementations such as JavaScript, JScript and ActionScript.
The document summarizes 10 new features in ECMAScript 2015 (ES6):
1. Default parameters allow defining function parameters that can be omitted when calling a function.
2. Rest parameters collect multiple function arguments into an array.
3. Spread syntax expands iterables like arrays into individual arguments.
4. Let and const introduce block scope and prevent redeclaration of variables.
5. Classes provide syntactic sugar over prototype-based inheritance.
6. Enhanced object literals allow omitting repeated name/value pairs and adding methods.
7. Template literals allow multiline strings and embedded expressions.
8. Object.assign copies enumerable own properties from one or more source objects to a target
The document summarizes Dmitry Soshnikov's presentation on ECMAScript 6 features at the HelsinkiJS meetup on December 12, 2011. Key features discussed include default function parameters, modules system, quasi-literals for string templates, array comprehensions, maps and weak maps, destructuring assignment, rest operator for function arguments, proxy objects for meta programming, and struct types.
This document summarizes new features introduced in ECMAScript 6 (ES6), the 2015 version of JavaScript, including let and const block scoping, default arguments, rest parameters, arrow functions, iterators, generators, classes, class inheritance, promises, modules, templates, list matching, property value shorthand, and Set and Map data structures. It provides code examples comparing ES6 syntax to older JavaScript syntax for each new feature.
A discussion on the upcoming new features in ES6 and how they change the way we build applications with JavaScript.
Most Notable Upcoming Changes in EcmaScript 6
Classes: Classes are now first-class citizens in ES6. The language offers support for classes ("class" keyword), constructors ("constructor" keyword) and the "extend" keyword for inheritance.
Modules: Modules provide a much needed way to segment and organize JavaScript applications in logical chunks of code. Many frameworks already provide ways to modularize large apps, but standardizing a common module structure will bring a level of interoperability between various JavaScript libraries.
Block Scoping: Scoping in JavaScript can be a confusing topic for programmers coming from more traditional Object-Oriented languages such as Java or C#. There are basically two scopes in JavaScript: global and function. Until now. With the help of the "let" keyword, ES6 enables the definition of block scopes for variables and functions.
Default Parameters: A liked feature of many other languages such as Ruby, the default parameters save endless checking of they've been passed and if they are "undefined".
Enhanced Object Literals: There is now a handy expression for property: property assignments and methods can be defined without the "function" keyword.
This document provides an overview of an ES6 hackathon focusing on new features in ES6 including block scope, modules, destructuring, arrow functions, classes, template literals, internationalization, spread syntax, generators, sets, promises and more. Attendees will have 30 minutes to work on code challenges exploring these new ES6 features using resources like JSFiddle and TypeScript. The challenges involve updating functions to use new syntax like arrow functions, default parameters and object shorthand, satisfying class assertions, and improving outputs using template strings and internationalization.
This document provides an overview of key features introduced in ECMAScript 6 (ES6), also known as ECMAScript 2015. It discusses arrow functions, block scoping with let and const, string templates, enhanced object properties, destructuring assignments, default and rest parameters for functions, iterators and generators, and more. Each new feature is explained with examples showing how it improves upon ECMAScript 5 syntax and capabilities.
Workshop Isomorphic Web Apps with ReactJS:
- Universal web apps - Isomorphic
- Server Side Rendering (SSR) with ReactJS
- Server Side Rendering with Redux
- Server Side Rendering with React Router
- Server Side Rendering: server.js - Main Entry Point
- Server Side Rendering: server.js - HTML Template
- Client main entry point: client.js
- Webpack bundles
- Avoiding FOUC - Webpack ExtractTextPlugin
- Webpack code splitting
- React Router - Configuration with Plain Routes
- React Router - Dynamic Routing & WebPack
- Dynamic Routing with new Reducers
- Combining new Reducers - ReducerRegistry
- Data fetching before rendering
- React Router + Redux + Redial: Server Side
- React Router + Redux + Redial: provideHooks
- React Router + Redux + Redial: Client Side
- SEO friendly universal web apps - React-Helmet
- React-Helmet - Server Side Rendering
Presentado por ingeniero: Marc Torrent
http://www.visual-engin.com/blog/testing-protocolos-y-extensiones-ios-workshop/
Workshop Testing, protocolos y extensiones:
- Objetivos
- Requisitios
- Protocols
- Configurar proyecto en xcode
- Tests unitarios
- Integración continua
- Material de interés
Presentado por ingenieros Alberto Irurueta y Alejandro García
Workshop fundamentos de Swift:
- Language Basics
- Playgrounds
- Variables
- Functions
- Optionals
- Control Flow
Presentado por nuestros ingenieros Alberto Irurueta y Pia Muñoz.
The document discusses building native components and modules for React Native applications. It provides guidance on creating native modules and components for both iOS and Android platforms. For native modules, it describes how to expose methods and properties to JavaScript. For native components, it explains how to create custom native views and expose their properties and events to React components.
Workshop Apps with ReactNative II:
- React Native short Recap
- Navigation in React Native Apps
- Tabs & Other Architectural Components
- Lists & Other Presentational Components
- OpenSource Important Components
Presentado por ingenieros Raúl Delgado y Marc Torrent
Workshop Apps with ReactNative I:
- What is React Native?
- Native Components
- Asynchronous execution
- Debugging
- Live Reload/Hot reload
- Flexbox and styling
- It’s just a JS framework!
- Native Components
- Native APIs
- Native modules
- Some Thoughts on Production Development
Presentado por ingeniero Jordi Serra
The document discusses advanced Redux concepts including higher order components, middleware, and the decorator pattern. It provides examples of how middleware can be used to log actions, modify actions before they reach the reducer, and compose independent and reusable behaviors. Code samples are given for middleware structure, a simple logger middleware, and a "superstitious" middleware that modifies actions conditionally. Popular middleware libraries like redux-promise, redux-thunk, and Redux-logger are also mentioned.
Workshop: EmberJS - In Depth
- Ember Data - Adapters & Serializers
- Routing and Navigation
- Templates
- Services
- Components
- Integration with 3rd party libraries
Presentado por ingenieros: Mario García y Marc Torrent
This document provides an introduction to Node.js, Express, and MongoDB. Node.js is a JavaScript runtime built on Chrome's V8 engine that allows JavaScript to be run on the server-side. Express is a web application framework for Node.js that provides routing capabilities and middleware support. MongoDB is a non-relational database that stores data in flexible, JSON-like documents, rather than using rigid tables. The document discusses the pros and cons of each technology and provides examples of basic usage and configuration.
Are you wondering how to migrate to the Cloud? At the ITB session, we addressed the challenge of managing multiple ColdFusion licenses and AWS EC2 instances. Discover how you can consolidate with just one EC2 instance capable of running over 50 apps using CommandBox ColdFusion. This solution supports both ColdFusion flavors and includes cb-websites, a GoLang binary for managing CommandBox websites.
Attendance Tracking From Paper To DigitalTask Tracker
If you are having trouble deciding which time tracker tool is best for you, try "Task Tracker" app. It has numerous features, including the ability to check daily attendance sheet, and other that make team management easier.
Cultural Shifts: Embracing DevOps for Organizational TransformationMindfire Solution
Mindfire Solutions specializes in DevOps services, facilitating digital transformation through streamlined software development and operational efficiency. Their expertise enhances collaboration, accelerates delivery cycles, and ensures scalability using cloud-native technologies. Mindfire Solutions empowers businesses to innovate rapidly and maintain competitive advantage in dynamic market landscapes.
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Softwares
NBFC Software: Optimize Your Non-Banking Financial Company
Enhance Your Financial Services with Comprehensive NBFC Software
NBFC software provides a complete solution for non-banking financial companies, streamlining banking and accounting functions to reduce operational costs. Our software is designed to meet the diverse needs of NBFCs, including investment banks, insurance companies, and hedge funds.
Key Features of NBFC Software:
Centralized Database: Facilitates inter-branch collaboration and smooth operations with a unified platform.
Automation: Simplifies loan lifecycle management and account maintenance, ensuring efficient delivery of financial services.
Customization: Highly customizable to fit specific business needs, offering flexibility in managing various loan types such as home loans, mortgage loans, personal loans, and more.
Security: Ensures safe and secure handling of financial transactions and sensitive data.
User-Friendly Interface: Designed to be intuitive and easy to use, reducing the learning curve for employees.
Cost-Effective: Reduces the need for additional manpower by automating tasks, making it a budget-friendly solution. Benefits of NBFC Software:
Go Paperless: Transition to a fully digital operation, eliminating offline work.
Transparency: Enables managers and executives to monitor various points of the banking process easily.
Defaulter Tracking: Helps track loan defaulters, maintaining a healthy loan management system.
Increased Accessibility: Cutting-edge technology increases the accessibility and usability of NBFC operations. Request a Demo Now!
introduction of Ansys software and basic and advance knowledge of modelling s...sachin chaurasia
Ansys Mechanical enables you to solve complex structural engineering problems and make better, faster design decisions. With the finite element analysis (FEA) solvers available in the suite, you can customize and automate solutions for your structural mechanics problems and parameterize them to analyze multiple design scenarios. Ansys Mechanical is a dynamic tool that has a complete range of analysis tools.
Explore the rapid development journey of TryBoxLang, completed in just 48 hours. This session delves into the innovative process behind creating TryBoxLang, a platform designed to showcase the capabilities of BoxLang by Ortus Solutions. Discover the challenges, strategies, and outcomes of this accelerated development effort, highlighting how TryBoxLang provides a practical introduction to BoxLang's features and benefits.
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...Hironori Washizaki
Hironori Washizaki, "Charting a Course for Equity: Strategies for Overcoming Challenges and Promoting Inclusion in the Metaverse", IEEE COMPSAC 2024 D&I Panel, 2024.
React and Next.js are complementary tools in web development. React, a JavaScript library, specializes in building user interfaces with its component-based architecture and efficient state management. Next.js extends React by providing server-side rendering, routing, and other utilities, making it ideal for building SEO-friendly, high-performance web applications.
Break data silos with real-time connectivity using Confluent Cloud Connectorsconfluent
Connectors integrate Apache Kafka® with external data systems, enabling you to move away from a brittle spaghetti architecture to one that is more streamlined, secure, and future-proof. However, if your team still spends multiple dev cycles building and managing connectors using just open source Kafka Connect, it’s time to consider a faster and cost-effective alternative.
Lots of bloggers are using Google AdSense now. It’s getting really popular. With AdSense, bloggers can make money by showing ads on their websites. Read this important article written by the experienced designers of the best website designing company in Delhi –
What is OCR Technology and How to Extract Text from Any Image for FreeTwisterTools
Discover the fascinating world of Optical Character Recognition (OCR) technology with our comprehensive presentation. Learn how OCR converts various types of documents, such as scanned paper documents, PDFs, or images captured by a digital camera, into editable and searchable data. Dive into the history, modern applications, and future trends of OCR technology. Get step-by-step instructions on how to extract text from any image online for free using a simple tool, along with best practices for OCR image preparation. Ideal for professionals, students, and tech enthusiasts looking to harness the power of OCR.
What is OCR Technology and How to Extract Text from Any Image for Free
Workshop 10: ECMAScript 6
1. Front End Workshops
IX.ECMAScript 6. Novelties.
Browser support
Alex Adrià Cuadripani
aadria@visual-engin.com
Mario García Martín
mgarcia@visual-engin.com
3. ECMAScript 6
Also known as ECMAScript 2015 or simply ES6
First working draft published on July 2011
Officially approved on June 2015
Implementation in major JavaScript engines is underway
4. More information in...
● http://www.ecma-international.org/ecma-262/6.0/index.html
● http://kangax.github.io/compat-table/es6/
6. Default parameters
// ES5
function multiply(a, b, c) {
b = typeof b !== 'undefined' ? b : 1;
c = typeof c !== 'undefined' ? c : 1;
console.log(a * b * c);
}
multiply(5); // 5
// ES6
function multiply(a, b = 1, c = 1) {
console.log(a * b * c);
}
multiply(5); // 5
multiply(5, undefined, 2); // 10
// ES6
function plurify(s, p = s + 's') {
console.log(s + ' ' + p);
}
plurify('beer'); // 'beer beers'
// ES6
function init(options = { 'param1': 1 }) {
console.log(options);
}
init(); // { 'param1': 1 }
init({ 'param': 2 }); // { 'param': 2 }
Additional usage...
7. Rest parameters
function f(x, ...y) {
console.log(x, y);
}
f(3, 'hello', true); // 3, ['hello', true]
f(3, 'hello', true, false); // 3, ['hello', true, false]
// ES 5
function logAllArguments() {
for (var i=0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
logAllArguments(1, 2, 3, 4, 5); // 1 2 3 4 5
// ES 6
function logAllArguments(...args) {
for (var i=0; i < args.length; i++) {
console.log(args[i]);
}
}
logAllArguments(1, 2, 3, 4, 5); // 1 2 3 4 5
Could replace usage of the ‘arguments’ variable...
8. Spread operator
function f(x, y, z) {
console.log(x + y + z);
}
f(...[1, 2, 3]); // 6
// ES 5
var numbers = [-1, 5, 11, 3];
Math.max.apply(Math, numbers); // 11
// ES 6
var numbers = [-1, 5, 11, 3];
Math.max(...numbers); // 11
var x = ['a', 'b'];
var y = ['c'];
var z = ['d', 'e'];
var arr = [...x, ...y, ...z]; // ['a', 'b', 'c', 'd', 'e']
Practical uses
9. for..of loops
var numbers = [2, 3, 4];
for (var value of numbers) {
console.log(value);
}
// 2, 3, 4
var letters = 'Homer';
for (var item of letters) {
console.log(item);
}
// 'H', 'o', 'm', 'e', 'r'
Do we really need another way of looping?
// Classic way
for (var i=0; i<numbers.length; i++) {
console.log(numbers[i]);
}
// ES 5
numbers.forEach(function(value) {
console.log(value);
});
// for..in
for (var i in numbers) {
console.log(numbers[i]);
}
10. var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); // 'Fifteen is 15 and not 20.'
Template strings
// ES 5
var greetings = 'Hellon' +
'How are youn' +
'today?';
// ES 6
var greetings = `Hello
How are you
today?`;
Offers support for multiple lines
11. Destructuring
var homer = {
name: 'Homer',
surname: 'Simpson'
};
var { name, surname } = homer;
console.log(name); // 'Homer'
console.log(surname); // 'Simpson'
// ES 5
var foo = ['one', 'two', 'three'];
var one = foo[0];
var two = foo[1];
var three = foo[2];
// ES 6
var foo = ['one', 'two', 'three'];
var [one, two, three] = foo;
var foo = function() {
return [175, 75];
};
var [height, weight] = foo();
console.log(height); // 175
console.log(weight); // 75
12. const
const PI;
PI = 3.14; // ERROR
const PI = 3.14;
PI = 3.14159; // ERROR
const PI = 3.14;
Value must be assigned in declaration
Read-only
Block scoped
if (true) {
const PI = 3.14;
}
console.log(PI); // ERROR
Characteristics
13. let
var fns = [];
for (var i=0; i<4; i++) {
fns.push(function() {
console.log(i);
});
}
fns[0](); // 4
fns[1](); // 4
fns[2](); // 4
fns[3](); // 4
var fns = [];
for (let i=0; i<4; i++) {
fns.push(function() {
console.log(i);
});
}
fns[0](); // 0
fns[1](); // 1
fns[2](); // 2
fns[3](); // 3
Block scopedlet name = 'Homer';
In previous workshops...
“var”... Are we going to see you ever again?
14. Block-level function declaration
'use strict';
function f() { return 1; }
{
console.log(f()); // 2
function f() { return 2; }
console.log(f()); // 2
}
console.log(f()); // 1
15. Arrow functions
// ES5
var sum = function(a, b) {
return a + b;
}
// ES6
var sum = (a, b) => a + b;
function Person() {
this.age = 0;
setInterval(() => {
this.age++;
}, 1000);
}
function Person() {
var self = this;
self.age = 0;
setInterval(function() {
self.age++;
}, 1000);
}
// ES 5
var data = ['one', 'two', 'three'];
data.forEach(function(value) {
console.log(value)
});
// ES 6
var data = ['one', 'two', 'three'];
data.forEach(value => {
console.log(value);
});
17. Inheritance
// ES6
class Song extends Media {
constructor(title, artist, duration) {
super(title, duration, false);
this.artist = artist;
}
}
class Movie extends Media {
constructor(title, year, duration) {
super(title, duration, false);
this.year = year;
}
}
// ES5
function Song(title, artist, duration) {
Media.call(this, title, duration, false);
this.artist = artist;
}
Song.prototype = Object.create(Media.prototype);
function Movie(title, year, duration) {
Media.call(this, title, duration, false);
this.year = year;
}
Movie.prototype = Object.create(Media.prototype);
18. Modules
// lib/math.js
export function sum(x, y) {
return x + y;
}
export const PI = 3.14159;
// lib/ux-math.js
export * from 'lib/math';
export const E = 2.7182;
export default function(x) {
return Math.exp(x);
}
// app.js
import * as math from 'lib/math';
console.log(math.sum(math.PI, math.PI));
// otherApp.js
import {sum, PI} from 'lib/math';
console.log(sum(PI, PI));
// app.js
import exp, {PI, E} from 'lib/ux-math';
console.log(exp(PI));
19. Generators
function* genFunc() {
console.log('First');
yield; // (A)
console.log('Second'); // (B)
}
let genObj = genFunc();
genObj.next()
//First
{ value: undefined, done: false }
genObj.next()
//Second
{ value: undefined, done: true }
function* objectEntries(obj) {
let keys = Object.keys(obj);
for (let key of keys) {
yield [key, obj[key]];
}
}
let batman = { first: 'Bruce', last: 'Wayne' };
for (let [key,value] of objectEntries(batman)) {
console.log(`${key}: ${value}`);
}
// Output:
// first: Bruce
// last: Wayne
20. Typed Arrays
let typedArray = new Uint8Array([0,1,2]);
console.log(typedArray.length); // 3
typedArray[0] = 5;
let normalArray = [...typedArray]; // [5,1,2]
// The elements are stored in typedArray.buffer.
let dataView = new DataView(typedArray.buffer);
console.log(dataView.getUint8(0)); // 5
22. Map
let map = new Map();
map.set('name','Bruce');
map.set('surname','Wayne');
map.size //2
map.get('name'); //Bruce
map.has('name'); //true
map.delete('name'); //true
map.clear();
map.size //0
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
for (let [key, value] of map) {
console.log(key, value);
}
23. WeakMap
//keys cannot be primitive types
let key = {a:1};
let wm = new WeakMap();
wm.set(key,"value");
wm.get(key); //you can get "value";
key=undefined;
console.log(wm.get(key));
console.log(wm.size); //undefined
//loop through the keys in an weakmap
doesn't work
for(let i of wm) {
console.log(i);
}
//delete all keys doesn't work
wm.clear();
24. Set
let set = new Set();
set.add('luke');
set.add('yoda');
set.size //2
set.has('luke'); //true
set.delete('luke'); //true
set.has('luke'); //false
set.size //1
set.clear();
set.size //0
let set = new Set(['luke', 'yoda', 'ben']);
set = new Set().add('luke').add('yoda').add('ben');
for (let x of set) {
console.log(x);
}
25. WeakSet
//values cannot be primitive types
let weakset = new WeakSet();
let obj = {name: 'Vito Corleone'};
weakset.add(obj);
weakset.add(function(){});
weakset.has({name: 'Vito Corleone'}); //false
weakset.has(obj); //true
obj = undefined;
weakset.delete(obj); //false
weakset.delete(function(){}); //false
weakset.size undefined
//loop through the values in an weakset
doesn't work
for (let x of weakset) {
console.log(x);
}
//delete all values doesn't work
weakset.clear();
26. Proxy
let handler = {
get: function(target, name){
return name in target?
target[name] :
'not a jedi';
}
};
let proxy = new Proxy({}, handler);
proxy.a = 'ben';
proxy.b = 'yoda';
console.log(proxy.a, proxy.b); // ben, yoda
console.log(proxy.c); // not a jedi
let target = {}; // Start with an empty object
let handler = {}; // Don’t intercept anything
let {proxy, revoke} = Proxy.revocable(target,
handler);
proxy.foo = 123;
console.log(proxy.foo); // 123
revoke();
console.log(proxy.foo); // TypeError: Revoked
27. Promises
var promise = new Promise(
function (resolve, reject) {
...
if (...) {
resolve(value); // success
} else {
reject(reason); // failure
}
});
● Pending: the result hasn’t been computed, yet
● Fulfilled: the result was computed successfully
● Rejected: a failure occurred during computation
28. Promises
function httpGet(url) {
return new Promise(
function (resolve, reject) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (this.status === 200) {
resolve(this.response);
//success
} else {
// Something went wrong (404 etc.)
reject(new Error(this.statusText));
}
}
34. String.prototype methods
'abc'.repeat(2); // 'abcabc'
String.prototype.repeat
'Ser, o no ser.'.startsWith('Ser'); // true
String.prototype.startsWith
'Ser, o no ser.'.endsWith('ser.'); // true
String.prototype.endsWith
'Ser, o no ser.'.includes('no'); // true
String.prototype.includes
35. Array static methods
// Array-like primitive types to Array
Array.from([1, 2, 3]);
//[1, 2, 3]
// Any iterable object...
// Set
var s = new Set(["foo", window]);
Array.from(s);
// ["foo", window]
Array.from(arrayLike[, mapFn[, thisArg]])
// Map
var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]
// String
Array.from("foo");
// ["f", "o", "o"]
// Using an arrow function as the map
function to manipulate the elements
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]
36. Array static methods
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]
//The difference between Array.of() and the Array constructor is in the handling of
//integer arguments: Array.of(42) creates an array with a single element, 42, whereas
//Array(42) creates an array with 42 elements, each of which is undefined.
Array.of(element0[, element1[, ...[, elementN]]])
43. More information in...
● http://blog.teamtreehouse.com/get-started-ecmascript-6
● https://babeljs.io/docs/learn-es2015/
● http://es6-features.org/
● Exploring ES6, by Dr. Axel Rauschmayer (http://exploringjs.com/es6/index.html)
● Setting up ES6, by Dr. Axel Rauschmayer (https://leanpub.com/setting-up-es6/read)
● https://developer.mozilla.org/en-
US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
46. Browser’s edge versions
Intended mainly for developers (and crazy users)
Frequent updates
Capable of running side by side with stable version
Chrome
Canary
Firefox
nightly
Opera
beta
WebKit
nightly
47. Transpilers
Compile from ES6 source code into ES5 source code
Offer support for ES6 features, to various degrees
48. More information in...
● https://www.google.com/chrome/browser/canary.html
● https://nightly.mozilla.org/
● http://www.opera.com/es/computer/beta
● http://nightly.webkit.org/
● https://github.com/google/traceur-compiler
● https://babeljs.io/