Sencha & ECMAScript 2015

Posted on in ES2015 JavaScript

With just a few more days to go, before the release of Ext JS 6.2, (BTW, Can’t wait! Material Design theme, pinch to zoom, D3 integration, calendar component and much more…) Sencha is already busy with working on the next major version of Ext JS.

We will give you a preview on our long term roadmap on:

es2015

One of the things that’s gonna be huge, is ES2015 support for Ext JS. Our goal is not to rewrite the whole framework according the new ECMAScript standard. no. ..but we want you to be able to write ES2015 code together with your Sencha framework API calls. So you can leverage the advantages of cleaner JavaScript code in your own Sencha classes and controllers.
With that comes new tooling that includes a transpiler, to make sure your code runs in all the supported browsers, and probably will also support for TypeScript, Grunt/Gulp etc. It’s all at an early stage yet, but if you have questions, (and you’re in Europe the week of the 20th of September), you will have the chance to meet the Sencha product manager and engineers at the roadshows.

I will be there as well, presenting an ECMAScript 2015 masterclass. I will cover the top 10 new features of ECMAScript 2015, and teach you what’s new through code examples.

(Are you from the USA? - I will give the presentation at SenchaCon in Las Vegas, November this year.)

Think about:
Block Code Constructs, Arrow functions, Default Parameters, Promises (see also my earlier post: https://www.leeboonstra.com/asynchronous-javascript-promises/), Classes, Modules... etc.

But there’s much more. And unfortunately not everything fits in my Top 10 / in an 45min talk. I like to share with you some more ES2015 code snippets, which are as cool, but didn’t make it in my final presentation. Have a look, this article contains info about:

  • Spread Operators
  • Maps & Sets
  • For Of Loops
  • Generators

Rest parameters & Spread Operator

Let’s say I have a function but I don’t know how many arguments I am gonna pass into it. Maybe 1, maybe 2, or maybe 15. (Not sure if you would want that tho... but you get the idea).

The spread operator looks like this: ...n. 3 dots and a variable which holds an array. That array contains all the parameters that you passed in. The rest parameters.
Let’s have a look how we did this before ES2015 and what’s new:

You can see the ES2015 is much nicer to write. It’s better performing, and it returns a true Array, where the old fashioned JavaScript arguments just contains an object that somehow fakes to be an Array.

You can use the spread operator in combination with Arrays for example:

These new data structures are supported in most of the modern desktop browsers. http://kangax.github.io/compat-table/es6/

New Data Structures

Map & WeakMap

The following four data structures are new in ECMAScript 2015: Map, WeakMap, Set and WeakSet. Let me explain how these work.

Maps are a store for key / value pairs. The Key and value could be a primitives or object references.

ES5 JavaScript was missing a data structure for mapping values. What people use to do; was abusing objects to save values, and that can lead you into nasty inheritance pitfalls. (See: http://speakingjs.com/es5/ch17.html#_pitfalls_using_an_object_as_a_map)

Maps give you a whole bunch of extra functionalities. You can get and set values in a map. You can delete a value in a map. You can loop through entries or values in maps, and you can clear them:

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

A WeakMap is a map that doesn’t prevent its keys from being garbage-collected, so you don’t have to worry about memory leaks.

It has almost the same functionalities as a Map, however you can’t iterate over the keys, values or entries and you also can not clear it.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

Keys of WeakMaps are of the type Object only. Primitive data types as keys are not allowed (So a String, Number, Boolean, null, undefined or a ES2015 Symbols can not be used as a Weakmap key.). A Map can use primitive values for keys.

w = new Map; 
w.set('a', 'b'); //Map { a: "b" }

w = new WeakMap; 
w.set('a', 'b'); //TypeError: "a" is not a non-null object

Sets and WeakSets

Sets are collections for unique values. The values could be also a primitives or object references.

An ES2015 Set has similar functionalities as a Map. But a value in the Set may only occur once; it is unique in the Set's collection and can not contain duplicates:

var myset = new Set(["A", "A", "B"]);
console.log(myset.size); //2 !!!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

Like a WeakMap, WeakSet is a Set that doesn’t prevent its values from being garbage-collected. It has simpler API than WeakMap, because has only three methods:
add(), delete() and has().

These new data structures are supported in most of the modern desktop and mobile browsers. http://kangax.github.io/compat-table/es6/

If you want to use it in production, you will need to make use of a transpiler like Babel, who can provide you a polyfill. (https://babeljs.io)

For-of loop

The for...of statement creates a loop iterating over iterable objects (including Array, Map, Set,String, arguments object etc..):

It is the most concise, direct syntax yet for looping through array elements and it avoids all the pitfalls of for–in loops, (which you would typically use for looping over object properties).Unlike forEach(), it works with break, continue, and return.

As you can see it is pretty similar to for-in loop, which can be used to iterate through object properties.

These new data structures are supported in most of the modern desktop browsers. http://kangax.github.io/compat-table/es6/

Generators

Generators are simply subtypes of Iterators. They are a special kind of function that can be suspended and resumed, which is different compared to iterators.

Generators use function* and yield operators:

Note the yield statements. It returns a generator instance and moves to the next yield when next() is called.

The snippet for the Dice Generator has a while loop that won’t end. It can roll numbers between 1 and 6.

These new data structures are supported in most of the modern desktop browsers. http://kangax.github.io/compat-table/es6/

If you want to use it in production, you will need to make use of a transpiler like Babel, who can provide you a polyfill. (https://babeljs.io)


Want to learn more about ECMAScript 2015? Join me at the roadshows: https://www.sencha.com/company/roadshow
Beside ECMAScript 2015 and TypeScript fun, there will be much to talk about: How to Test your JavaScript code, Build Data analysing apps with Ext JS 6.2, new upcoming Sencha Tools, customer cases and much more...

Some Sencha news from me!

Posted on in Ext JS 5 Sencha

Hi guys,

I just wanted to share some personal Sencha updates with you!

Hands-on Sencha Touch 2 - O'Reilly

First of all, my book "Hands-on Sencha Touch" is finally printed.
I spent a lot of time, discussing the latest Sencha Touch framework and with this book it's possible to build mobile web applications.
Checkout the table of contents at: http://shop.oreilly.com/product/0636920030058.do

If you like my writing style. I am developing ideas for writing an advanced Ext JS 5 book!

Ext JS 5 courses

Talking about Ext JS 5, the new Sencha Ext JS framework... I've been very busy lately, developing course materials for various Ext JS 5 beginners & advanced courses. Learn Ext JS 5, the new MVVM application architecture (viewcontrollers + databinding woot woot!), how to upgrade to Ext JS 5 or how to develop huge enterprise apps for tablets with Ext JS version 5.

Checkout our training schedule: http://www.sencha.com/training/
I will be teaching across all over Europe the next coming months:
London, Paris, Frankfurt, Munich, Milan, Zurich, Amsterdam and of course Live Online!
Interested? Leave a comment below, and I can give your some discount promo codes!

Conferences & Workshops

For the rest I'm presenting lately on a lot of workshops and conferences.
Tomorrow I will host another appcamp for Appsterdam:
http://www.meetup.com/Appsterdam/events/184318382/
Come join and check this out!

Also I will host a webinar for O'Reilly. Add the date to your calendar:
http://www.oreilly.com/pub/e/3100

Introducing Ext JS 5 Beta

Posted on in Ext JS 5 Sencha

Last week was a very important week for Sencha. We recently introduced Ext JS 5 to the public. It's now possible to try out the beta version!

As a Sencha employee I already had early access to this framework; that gave me enough time to play around with it. ..and I have to say... I love it!

Ext JS 5, is another step closer towards Sencha Touch. It shares a lot of code with Sencha Touch it allows the same code to power both desktop and touch device experiences, with a gesture system inspired by Sencha Touch.

Tablet support

Ext JS 5 supports IE8+ and the latest tablet platforms such as iOS6/7, Chrome on Android 4.1+, and Win 8 touch-screen devices (such as Surface and touch-screen laptops) running IE10+.

MVVM application architecture

Another very important feature of Ext JS 5 is support for a popular alternative to MVC: MVVM (standing for Model-View-ViewModel). One of the big attractions to MVVM is data binding. With data binding, you no longer have to write all of the “glue” code to connect the model layer to the view and update the model when the view is modified.

That's not all. There are lots of other cool features. I summarized a list with all the new topics:

  • Core, Class System: Private Methods, Class System change to merge with Sencha Touch, Data Package, Events, Utilities & Feature/Environment dection
  • Application Architecture, Additional MVVM (Model, View, ViewModel), Sencha Ext 4 MVC still exists, Two-way data binding, View Models, View Controllers, Routing
  • Data Package, Model validation Binding, Many to Many Associations, Chained Stores, Data Sessions, Heterogeneos Stores and TreeStores, Offline Proxies (from Touch, LocalStorage, SessionStorage, SQL)
  • Forms, Custom Field Types, Field layouts, Layout free containers, Textfield triggers
  • Tablet/ Touch Support, Neptune Touch theme, New Crisp (iOS 7 like) Theme, Event System, Gestures support
  • Grids, Widget Column (component cells), Widgets (Progress Bar, Slider, Sparkline), Buffered Updates, Cell updates, Rendering Optimizatons
  • Sencha Charts, Sencha Touch charts package, Legacy Charts available atleast till 5.1
  • New components / classes, Multi-select grid, Tag field, Ext.mixin.Mashup, Ext.dashboard.Dashboard
  • Other, Compatibility Layer, Sencha Cmd 5

Take a look into the Ext JS 5 API Docs and "What's new"-guides, to play around with all these new goodies! I'm sure, you'll love it too.

Handy Links