KENDO UI

THE STATE OF
JAVASCRIPT 2019
WHITEPAPER
The State of
JavaScript 2019
Jen
Looper
Jen Looper is a Google Developer Expert and a
Senior Developer Advocate at Progress with over 18
years’ experience as a web and mobile developer,
specializing in creating cross-platform mobile apps.
She’s a multilingual multiculturalist with a passion
for hardware hacking, mobile apps, Vue.js, machine
learning and discovering new things every day. She
is the founder and CEO of Vue Vixens, an initiative
promoting diversity in the Vue.js community. Visit
her online at http://www.jenlooper.com, or via Twitter
@jenlooper.
Sebastian
Witalec
Sebastian Witalec is a Senior Developer Advocate
for Progress who specialises in Angular and Nati-
veScript. He loves working on both serious and fun
projects and one day he will use his robot army
to conquer the world. He is always happy to learn
about new stuff and to pass the knowledge as far
as his voice (or the wire) can take him. Sebastian is
based in London and is actively working with various
dev communities in the area. When not acting techie,
he is a massive football fan/player (probably big-
ger at heart than skills). You can follow Sebastian on
Twitter @sebawita.
Progress.com
Alyssa
Nicoll
Alyssa is an Angular Developer Advocate and
Google Developer Expert. Her two degrees (Web
Design & Development and Psychology) feed her
speaking career. She has spoken at over 30 confer-
ences internationally, specializing in motivational soft
talks, and enjoys gaming on the Xbox and scuba
diving in her spare time. Her DMs are always open,
come talk sometime.
John
Bristowe
John Bristowe is a member of the Developer Rela-
tions team at Progress. He specializes in web and
mobile app development and spends much of his
time focused on products like Kendo UI, Fiddler,
NativeScript and various .NET tools.
TJ
VanToll
TJ VanToll is a frontend developer, author and a Prin-
cipal Developer Advocate for Progress. TJ has over
a decade of web development experience, including
a few years working on the jQuery team. Nowadays,
he spends his time helping web developers build
mobile apps through projects like NativeScript.
2
 Rob Eric
Lauer Bishard

Rob Lauer is Senior Manager of Developer Rela-
tions at Progress and has a passion for mobile app
development and the open web. You can find Rob
rambling as @RobLauer on Twitter.
Eric Bishard is a Developer Advocate working with
KendoReact here at Progress. As a software engi-
neer, he has experience building web-based applica-
tions with a focus on components for user interfaces
in frameworks like Angular and React. Feel free to
connect with Eric (@httpJunkie) on Twitter!

Table of Contents
Intro / 4
The State of ECMAScript / 5
The State of Vue.js / 19
The State of React / 25
The State of Angular / 36
jQuery / 45
Kendo UI / 46
“JavaScript-Native” Mobile Development / 47

Progress.com 3
Intro

Over the last few years, we here at Progress have made it an annual tradition to take
a look at the state of JavaScript and share our findings in the yearly whitepaper. Our
2018 outlook was jampacked full of memes, ECMAScript changes, community events
and framework updates!

We’ll start our journey by jumping neck deep into those ECMAScript changes, with
plenty of code examples by Alyssa Nicoll, our Angular Developer Advocate for
Kendo UI. She’ll cover not only what awesome changes happened to the spec last
year, but also what is coming in 2019.

Next, we’ll go through some of the most popular frameworks and their stories in
2018. Jen Looper, our Senior Developer Advocate, will walk us through high-level API
changes, runtime/compiler improvements and other Vue.js libraries/tooling around
the ecosystem.

Then, Eric Bishard, a Developer Advocate working with KendoReact here at Progress,
will walk us through the wonderful world of React! Eric will discuss what continues
to set React apart as well as its community, components, state management and so
much more!

Our Angular section will be covered by Sebastian Witalec, a Solution Engineer and a
Technical Evangelist for Telerik. He will cover the big selling points for Angular and
what has recently changed.

Kendo UI and jQuery updates will both be brought to you by our very own John
Bristowe! He is the Developer Advocates Team Lead for Kendo UI. John will provide
a high-level overview of the state of things in jQuery and touch on all the updates
and features added to Kendo UI this past year.

The last section on mobile development in the JavaScript world is brought to you by
TJ VanToll and Rob Lauer. TJ VanToll is a Principal Developer Advocate for Progress
and Rob Lauer is Senior Manager of Developer Relations. They will cover JavaScript-
Native today and moving forward with JavaScript-Native in 2019.
10pt
Let’s dive in, shall we?!

Progress.com 4
ECMAScript in 2018 & Beyond
By Alyssa Nicoll

The 2018 round of ECMAScript changes brought some amazing new features that
we will detail in this section. The spec introduces async iterators as well as four new
regex features: the dotAll flag, named capture groups, Unicode property escapes
and lookbehind assertions. “It also includes rest parameter and spread operator sup-
port for object properties. There have also been many minor updates, editorial and
normative, with many contributions from our awesome community.” — TC39 Guide

ECMAScript Features Covered

• Template Literal Restriction Lifted, by Tim Disney

• New Regular Expression Features:
• The dotAll Flag (S), by Mathias Bynens
• Named Capture Groups, by Gorkem Yakin & Daniel Ehrenberg
10pt
• Lookbehind Assertions, by Gorkem Yakin, Nozomu Katō & Daniel Ehrenberg
• Unicode Property Escapes, by Mathias Bynens
• Rest/Spread Properties by Sebastian Markbåge
• Rest Parameter Support for Object Properties
• Spread Parameter Support for Object Properties
• Promise.protype.finally, by Jordan Harband
• Asynchronous Iteration, by Domenic Denicola

Template Literal Restriction Lifted,

by Tim Disney

Lifting template literal restriction proposal

In ES2015, template literals came with restrictions on escape sequences. This new
proposal will allow previously blocked sequences that were blocked by early errors.
Now, invalid strings will return undefined and will still preserve the string itself in
.raw:

Progress.com 5
function tag(stringExample) {
console.log(‘Cooked: ‘ + stringExample[0]);
console.log(‘Raw: ‘ + stringExample.raw[0]);
}
tag `hi \xA9`
10pt 10pt
> Cooked: hi ©
> Raw: hi \xA9

tag `hi \xerxes`

> Cooked: undefined
> Raw: hi \xerxes

https://stackblitz.com/edit/es2018-template-literal-restriction?embed=1&file=index.js&
hideExplorer=1&hideNavigation=1

This one is a bit complicated, so check out further examples here:

• Template Literal Revision
• Tagged Template Literal Restriction Removed

Progress.com 6
[REGEX FEATURE] The dotAll Flag /S,
by Mathias Bynens

dotAll (/S flag) for regular expressions proposal

In regular expressions, the dot matches ANY and all single line characters. In EC-
MAScript though, there are two exceptions:
• Astral characters—Anything outside of the main (BMP) group of unicode char-
acters **
• Newline or line terminator characters

**There are multiple “planes” that unicode characters are classified under and any
that are not in the main one (BMP) are considered esoteric and therefore referred to
as “astral”.
• Unicode Allocation
• Why Are Unicode Characters Outside the BMP Called Astral?

This is an issue because it excludes some newline characters, but not all. The dot
is all commonly used to match any character, which it currently isn’t doing. This is
where the dotall flag comes in handy!

The regex dotAll feature now will catch newline characters too \n via “.” using the /s
flag

const regex = /alyssa.nicoll/s;

regex.test(`alyssa
nicoll`); // true

Progress.com 7
Question: If it is called dotAll mode, why is the flag /s?

The s stands for singleline mode and as the docs say:

The accessor name dotAll gives a much better description of the flag’s ef-
fect. For this reason, we recommend referring to this mode as dotAll mode
rather than singleline mode.

[REGEX FEATURE] Named Capture Groups, by Gorkem Yakin &10pt

Daniel
Ehrenberg

Named Capture Groups proposal

Named capture groups are a sick new feature regarding regular expressions.

Capture Groups

Groups multiple tokens together and creates a capture group for extracting a
substring or using a backreference. — regexr.com

When you use parentheses in a regex, you are creating a capture group.

So instead of returning just “2019-01”:

[“2019-01”, index: 0, input: “2019-01-28”, groups: undefined]

You can return three items in the array, “2019-01”, “2019”, and “01”.

Progress.com 8
Regex Using Capture Groups

So here we are just returning a couple pieces of info in two different capture groups:

let regex = /(\d{4})-(\d{2})/u;

This is cool, but not nearly as semantic or cool as it could be! Enter, the named cap-
ture group! ?<name>

Named Capture Groups

Here, we are using the new ability to give names to our capture groups using
?<name> syntax inside the capture group:

let regex = /(?<year>\d{4})-(?<month>\d{2})/u;

console.log(regex.exec(‘2019-01-28’));

Progress.com 9
Named Capture Groups Inside Regex

The named capture group uses don’t stop there! You can also use it within a regex
to reference itself with this syntax: \k<name>.

let sameMonth = /(?December|January|February)==\k/u;

sameMonth.test(“January==January”); // true
sameMonth.test(“January==February”); // false

While this concept is super cool, my demo is not very impressive or useful, so I found
a better use case for this named capture group feature. Many signup forms will have
you type your email and password twice for confirmation. With this new feature, you
can now validate and check for a match in one step:

10pt

let sameValue = /^(?[\w.-]+@\w+.\w+) == \k$/u;

sameValue.test(“alyssa.nicoll@progress.com == alyssa.nicoll@progress.com”);
// true
sameValue.test(“alyssa.nicoll@progress. com == alyssa.nicoll@progress.
com”); // false
sameValue.test(“alyssa.nicoll.com == alyssa.nicoll.com”); // false
sameValue.test(“alyssa.nicoll@progress.com == lyssa.nicoll@progress.com”);
// false

This regex is by no means the perfect email verifier, but it gets the point across! ;)

Progress.com 10
Named Capture Groups Outside Regex (in .replace)

You can also use named capture groups outside of the regex they are defined in! A
string’s replace method can utilize them as well!

let regex = /(?<country>\d?)[\s.-]?[(]?(?<area>\d{3})[)]?[\s.-]?(?<prefix>\d{3})

[\s.-]?(?<line>\d{4})/;

“4078675309”.replace(regex, “($<area>) $<prefix>-$<line>”);

> “(407) 867-5309”

“Jenny’s Number: 1.(407-867 5309.”.replace(regex, “($<area>) $<prefix>-

$<line>”);
> “Jenny’s Number: (407) 867-5309.”

[REGEX FEATURE] Lookbehind Assertions, by Gorkem Yakin, Nozomu

Katō & Daniel Ehrenberg

Lookbehind Assertions proposal

ECMAScript has had lookaheads but now we have lookbehinds! People used to do
hacky things to get this functionality, but now, thankfully, it is built in.

The ECMAScript lookbehind allows variable length lookbehinds like C#, rather
than only the fixed length patterns of Perl lookbehinds. — The Newstack.io

If you’d like to look behind for a positive assertion, now you can within a group:
(?<=…).

You can also look behind for negative assertions with an exclamation instead of the
equals: (?<!…).

Progress.com 11
/(?<=#).*/.test(“bears”) //false
/(?<=#).*/.test(“#bears”) // true

“#bears”.match(/#.*/)[0]; // “#bears”
“#bears”.match(/(?<=#).*/)[0]; // “bears”

[REGEX FEATURE] Unicode Property Escapes, by Mathias Bynens

Unicode property escapes in regular expressions proposal

Before, there was no way in regular expressions to access characters based on their
properties. This proposal adds Unicode property escapes to JavaScript regular
expressions. Now, in ECMAScript 2018, we can not only match English characters but
all Unicode characters utilizing their Unicode properties using /p{} or with /P{}.

Lastly, we can use capital “P”(\P ) escape character instead of small p (\p ), to
negate the matches. — Free Code Camp Article

For a full list of properties

Whitespace Property

You can use properties like White _ Space to see if there are any whitespace char-
acters in a string:

/\p{White_Space}+/u.test(‘hello and howdy’)

> true

Progress.com 12
Script Property

Before this, it wasn’t easy to select different types of Unicode characters. Now, using
the Script property, we can! I was confused about the differences between scripts
and languages until I found this helpful tip:

The Unicode Standard encodes characters on a per script basis. So, for
example, there is only one set of Latin characters defined, despite the fact that
the Latin script is used for the alphabets of thousands of different languages.
— Unicode.org

/^\p{Script=Greek}+$/u.test(‘Ω’)
> true

Here is a handy-dandy list of languages by writing system, if you are interested in

more scripts.
10pt

The property escape now makes it possible to select by all the properties while hav-
ing the added benefit of making your regular expressions more self-explanatory.

Important: In order to use property escapes, regular expressions must have

the flag /u. Prior to /u, \p is the same as p. — Unicode Property Escapes

Emoji Property

The fun with property escapes doesn’t stop there! The Unicode database includes
many different types of emojis under these properties: Emoji, Emoji _ Compo-
nent, Emoji _ Presentation, Emoji _ Modifier, and Emoji _ Modi-
fier _ Base. So, in order to match different kinds of emojis, we’ll need to use a
combination of these different selectors.

10pt
/\p{Emoji}/u.test(‘ ’) // true

Progress.com 13
The emoji modifier is used10pt
to detect things like skin tones. The first clap emoji in
10pt
the example below is default, whereas the second one is the clap emoji next to the
medium-dark skin tone emoji ( + ) which combines into the clap you see:

10pt
10pt
/\p{Emoji}\p{Emoji_Modifier}/u.test(‘ ’) // false
/\p{Emoji}\p{Emoji_Modifier}/u.test(‘ ’) // true

Rest/Spread Properties, by Sebastian Markbåge

Object Rest/Spread Properties proposal for ECMAScript

Yes, the Spread operator ... is the same operator for the Rest operator. It just de-
pends on how you are using each one. Check out this cool explanation by Joy Wargu
on Scotch.io for further descriptions/examples of both in action: “Javascript’s three
dots ( ... ): Spread vs rest operators”.

Rest Parameter Support for Object Properties

We can now extract Object properties using the rest parameter ... .

So in this example, we are extracting coffee and origin, while storing the rest
inside leftover:
10pt
let {coffee, origin, ... leftover} = {
coffee: ‘40 sardines blend’,
origin: ‘guatemala’,
roast: ‘italian’,
price: ‘12.64’
};

coffee; // “40 sardines blend”

origin; // “guatemala”
leftover; // {roast: “italian”, price: “12.64”}

Progress.com 14
This feature can also be used to clean up properties out of Objects that you don’t
need. Simply set it to a new Object that discards the unwanted properties:

10pt

let {getRidOfMe, andMe, ... newObject} = {

getRidOfMe: “”,
andMe: “”,
keepMe: “”,
alsoMe: “”,
meToo: “”
};
newObject; // {keepMe:””, alsoMe:””, meToo:””}

Progress.com 15
 10pt

Spread Operator Support for Object Properties

We can also use the spread operator on Object properties now! Behold the magic!
We simply use
10ptthem to extract coffee and shipmentInfo into a new sparkly
allProductInfo Object:

const coffee = { name: “40 Sardines Blend”, origin:”guatemala” };

const shipmentInfo = { amtSold: “243”, date:”01-22-2019” };
const allProductInfo = { ... coffee, ... shipmentInfo };

Promise.protype.finally, by Jordan Harband

Many libraries (when, Bluebird, Q) have their own working version of promise.fi-
nally(). This method returns a callback once the Promise is finished. It is FINALLY
time for a native implementation of the finally() method — Promise.proto-
type.finally.

fetch(‘https://api.github.com/users/alyssamichelle’)
.then(response => response.json())
.then(data => console.log(data.name))
.catch(err => console.error(err))
.finally(() => console.log(‘Promise Complete!’));

Promise.prototype.finally proposal

Progress.com 16
Asynchronous Iteration, by Domenic Denicola

Asynchronous iteration proposal

This is arguably one of the most exciting features in ES2018—it allows you to create
a loop of async code! It adds a new “for-await-of” loop that, as the name suggests,
lets us call async functions that return Promises. It won’t continue on until each
Promise is resolved.

Amazing example here by rajaraodv

Progress.com 17
What’s to Come in 2019

As always, the list of finished proposals can be found here on GitHub. The upcom-
ing features seem really exciting for 2019. Things like optional catch params, a JSON
superset and trimStart/trimEnd for String! Check out the full list of upcoming goodies
below:

• Optional catch binding proposal

• JSON superset proposal
• Symbol.prototype.description proposal
• Function.prototype.toString proposal
• Well-formed JSON.stringify proposal
• String.prototype.trimStart / String.prototype.trimEnd proposal
• Array.prototype.flat / Array.prototype.flatMap proposal

What’s New in ECMAScript 2018

What’s New in ECMAScript 2019
Here are examples of everything new in ECMAScript 2016, 2017 and 2018
TC39 Final Proposals
RegExr - Learn to build REGEX

Progress.com 18
The State of Vue.js in 2019
By Jen Looper

So many JavaScript frontend frameworks. As the famous, or perhaps infamous, State

of JS Survey pointed out, “The frontend remains the key battleground for JavaScript.”
While the term ‘battlefield’ connotes something unnecessarily combative, it’s interest-
ing to see that this survey concludes “…now that the dust has cleared, it’s starting to
look like only two combatants are left standing.” The chart below reveals that React
and Vue are the “two combatants” in question:

For me, this graph doesn’t so much show “combatants” “winning” some sort of war,
but rather the vast amount of curiosity surrounding Vue.js—46.6% of respondents
have heard of it and would like to learn it. This must be music to the ears of quality
trainers such as Vue Mastery and Vue School, and will probably push a large number
of people toward creating good content for folks to learn about Vue.js via video and
written articles.

One unique trait of Vue.js users is their “Eastward” lean. Chinese users are “all in”
on the ecosystem, and it will be interesting to watch the framework’s evolution as it
marches West to new markets.

Progress.com 19
Will 2019 be the “Year of Vue,” as some have predicted? Time will tell. The responses
to the aforementioned survey do show that it has traction and has captured the
hearts and minds of many developers:

Amusingly, the next charts show just how subjective developer love is—note that
some love its “elegant programming style and patterns” as much as others hate its
“clumsy programming style”!

Progress.com 20
Subjectivity aside, it seems clear that Vue.js is on an upward swing of popularity and
developers are interested in using it. For the most part, the ease of getting started,
the clean architecture of using single-file components, the syntax, the documenta-
tion and the elegant programming style are all clear draws.

For Vue.js and Vue developers, 2019 should be a particularly exciting year as Evan
You (creator and self-styled Benevolent Dictator of Vue) has laid out plans for a ma-
jor new release: Vue 3.0. This release follows the two-year anniversary of Vue 2.0. For
the remainder of this section, I’ll go through these plans, or you can read about them
for yourself on his Medium post.

Progress.com 21
High-Level API Changes

Vue 3.0 will introduce breaking changes, but 2.x syntax will continue to be supported
and can be used via compatibility builds. There should not be major changes to
template syntax, other than a proposed change to scoped slots syntax that is cur-
rently under debate. 3.0 will support class-based components out of the box while
allowing developers to use ES2015 easily without requiring extra steps.

Importantly, the entire codebase will be rewritten in TypeScript. This means

TypeScript support will be much improved by default, although its use remains op-
tional.

Mixins can still be used, but the use of plugins will change. Rather than installing
plugins globally and forcing a mutation to the runtime, plugins will be scoped to a
component tree. This should ease problems with testing plugins.

Functional components will finally be able to be plain functions, but asynchro-

nous components must be created via a helper function.

Major changes will be applied to the Virtual DOM format used in rendering—but
stay tuned for exactly what to expect.

Source Code Architecture

One of the biggest changes expected in the 3.0 release will be breaking internal
functionalities into individual packages. The idea behind this complete rewrite is
to ease the entry barrier for new contributors, who will be able to contribute to the
packaged parts that impact them, rather than to the whole. For example, the observ-
er and scheduler will be broken into separate packages.

This decoupling of the various moving parts of Vue.js is great news for new con-
tributors who find the complexity of the whole framework daunting and thus might
hesitate to make a first commit.

Observation Mechanism

Get ready for a new observer! In Vue 3, you’ll be able to make use of a proxy-based
observer implementation that reduces some of the pain points of Vue 2.x’s imple-
mentation. You’ll be able to create observables via a new API addition for those times

Progress.com 22
when you don’t want to use Vuex to manage state. “Lazy observation” will be a new
feature, such that overhead caused by observation at startup can be mitigated by
allowing observation of data ad hoc.

Improvements to the watcher will make change notification more granular; in Vue
3, you will be able to update only watchers dependent on a specific property.

“Immutable observables” will be a new feature of Vue 3. Don’t want your values to
change? Freeze them ad hoc.

Importantly, improvements to debugging will allow the developer to track when a

component re-renders via new hooks: renderTracked and renderTriggered.

Runtime and Compiler Improvements

There’s a clear goal to make Vue more performant, and steps are being taken to
make an already fast framework even faster. Contributors have borrowed several
ideas from Inferno, a blazing fast Virtual DOM implementation: “3.0 will shave off half
the time spent in JavaScript when your app boots up.”

The rewrite of Vue for 3.0 enables tree-shaking for all features, which are imported
on demand. The weight of the runtime is of great importance, with a baseline set for
less than 10 KB zipped.

A good example of this emphasis on performance is evidenced by the work done

on slots. Now, when a slot’s content changes, only its dependent content changes;
likewise, when a parent re-renders, the child does not have to if its own content is
unchanged. Stopping unnecessary re-renderings will help boost performance.

Importantly for libraries such as NativeScript-Vue, a new API for creating custom ren-
derers will be made available so that contributors can avoid forking the entire library
to create custom implementations. This is great news for mobile developers!

A Note About Browsers: Vue 3 is designed for modern browsers, assuming

baseline ES2015 support. However, support for IE11 will be ensured by a sepa-
rate build.

Progress.com 23
What about 2.x?

Vue 2.x users will be ‘led’ to Vue 3.0 by progressive enhancements to 2.x releases.
Vue 2.x will continue to be supported for 18 months after Vue 3.0 is released.

Other Vue Libraries

Vue has a vibrant ecosystem of terrific tools to make the frontend developer’s life
easier. The Vue Router for navigating through your app, Vuex for state management,
the Vue CLI for scaffolding your apps plus Vue CLI UI for managing them from within
a browser and the Vue DevTools are all evolving alongside the main library.

A Note About the Vue.js Community

Being a young community, highly diffused from Asia through Europe and
into the Americas, the Vue community is a comparatively diverse one—at
least in terms of geographical diversity. Where JavaScript communities
tend to struggle is in efforts of inclusion, especially for women and people
who identify as such. Since the Vue community is not tethered to any
corporation such as Google or Facebook, any efforts for inclusivity have had
to stem from the grass roots. These efforts, as a result, are both successful
and durable, having impressive international scale. Of note is Vue Vixens,
a diversity initiative geared at helping people who identify as women learn
Vue.js, patterned after ng-Girls but scaling into chapters internationally.
Full disclosure, I am the Founder and CEO of Vue Vixens. We have had an
extremely successful 2018 and expect great things in 2019!

Vue.js is an up-and-coming library with a vibrant ecosystem, a sophisticated inter-

national community, a reputation for meticulous docs and beautifully written code
as well as a core team that believes in rigor and quality. If you’re interested in getting
started, take a look at the docs and get ready to build beautiful interfaces on desk-
top, mobile and web.

Progress.com 24
React
By Eric Bishard

React is continuing to see growth in 2019. A pretty clear measurement is npm down-
loads, which shows numbers that indicate React is not only holding its position as
the most downloaded and used frontend framework, but also illustrates its continued
growth. There are a lot of things I think contribute to its usage by developers, but I
believe that React’s consistency over the years plays a huge part.

What Continues to Set React Apart in 2019

What sets React apart from other frontend frameworks is its commitment to doing
one thing very well. That one thing is components, their composition and manag-
ing their state. Other frameworks take a different and more all-inclusive approach or
try to help the developer get straight to working with the framework with minimal
setup—both are approaches that help propel those frameworks.

React, however; is laser focused on the component model. React lets the developer
choose their own solution for routing, data models and other accoutrements, and by
doing this, it makes the framework more flexible, which helps to create a higher rate
of adoption.

React isn’t really considered a framework, specifically because it chooses to focus

on just the component story, but it’s definitely getting some amazing features as of
late that help with the application as a whole. Context API, lazy loading, built-in state
management with hooks and things like suspense are all recently released features

Progress.com 25
that I feel it get us closer to being a framework. React is good at walking that line
though, and even though it’s not necessarily considered a framework, it directly
competes with other libraries that can be considered a framework like Angular and
Ember.

React and Its Community

One reason React developers are so supportive of React is because of the stable
nature of the project. We have seen amazing things in 2018 without a single major
version bump. So many new features and changes in how the library works or how it
will work in the future are all peacefully coexisting side by side.

The team follows a principle of gradual adoption, meaning that they get feedback
from the community and then quickly patch, fix, update and release on a persistent,
timely and consistent schedule. As a result, the React team gains loyalty simply by
building great software. Bringing more compatible options and less breaking chang-
es is ideal.

Their team members come right from the community as well, a lot of the time by
being recognized as contributors and sometimes actually joining the core team. You
can’t build software this way without amazing community support. That is the most
notable quality about React and its community—that relationship with the actual
team building the software. This is also a common thing seen throughout the current
frontend framework landscape right now, with Angular, Vue and even Ember see-
ing their respective communities grow along with the popularity of their frameworks
showing a resurgence.

Another great thing about the React community is its sheer numbers. In most major
cities around the world, there are an abundance of React meetups. In the Bay Area
where some technologies only have one or two meetups, React has several and that
means you can attend a meetup in pretty much any part of town. There are always a
lot of interesting people at these meetups, and they tend to overlap with the Angular
community. I see people from both camps enjoying learning about the other frame-
works and attending both React and Angular meetups.

In my experience, most React developers come from JavaScript land—they are

typically well versed with Node and Express and many are veterans of the industry,
some even coming from the IT and Sys Admin world. Another place the React com-
munity congregates is on Reddit, where a large React community exists with a lot of
unfiltered talk about React content.

Progress.com 26
Having an amazing community is essential, especially when making the decision to
move to React as your frontend development choice. I highly suggest giving React a
try in 2019. It’s amazingly simple to learn because of the insane amount of resources
out there. You can find some of our pillars of the community releasing courses on
egghead.io, where React is one of the main categories for learning. YouTube can also
be a great source for content at no cost and with it, a community of developers that
stream live on both YouTube and Twitch.

The Component Story

As I mentioned, React is perceived more as a solution to one part of the web de-
velopment process. Even these things I speak about that come out of the box are
centered around building reusable components.

One of React’s decisions early on was to use something called JSX. Rather controver-
sial at first, it’s proven to be a superior form of writing HTML for React components
and puts your markup right inside your JavaScript.

JSX and React’s component model could make a standard model for building uni-
versal components in HTML and JavaScript. Ideas like this are discussed in the latest
React Podcast episodes, saying that React could become transcendent rather than
slowly decay like most frameworks by taking the component model that they have
introduced and getting it added as a first-class construct in browser manufacturers.
They note that this is not impossible and by doing so, React could become the de
facto web technology and achieve transcendence where other frameworks die off
with a long tail!

With all of the work done around React’s components and making them super simple
to write using functional components and ES6 style syntax, one could see this tran-
scendence idea come to life. But let’s not get too ahead of ourselves yet—most librar-
ies and frameworks have a shelf life of 3-5 years. React is knocking at that door now,
so that means the question is whether it will become transcendent unlike any other
frontend framework or will be phased out eventually by new frameworks like Vue?

React’s Range of Application

React’s range of applications is wide. You can use it for building desktop apps, mo-
bile apps and, of course, web apps. Most web frameworks have a hard time break-
ing into this cross-genre development area. Between React, React-Native and even

Progress.com 27
things like Preact (a light version of React), we are seeing React gain the ability to
go wherever it wants. Because the React team took strides to not be a framework, it
doesn’t need a router, data model or anything out of the box that does not contrib-
ute to working with components. This is a major attribute of React versus its closest
competitors.

The above graph is a screenshot from npm trends, where I ran a common trend
analysis pitting React vs. Angular vs. Vue against each other. Check out the graph for
yourself and play around with the npm trends to see how your favorite libraries stack
up.

We can see that when it comes to npm downloads, React really does appear to be
ahead of the pack, but this is just one metric. With the adoption of Vue picking up
and amazing stuff coming from the Angular team, 2019 will be interesting. In my
opinion, this healthy competition is a win/win for everyone. In the past few years, we
have seen all of the major frameworks work with each other, but a healthy amount of
competition as we know fuels innovation.

As mentioned, React has picked up a ton of support in 2018, but what I would note
is that it’s actually been on this steady increase since 2014. This next chart is pulled
from a talk called “npm and the future of JavaScript” and shows React next to Ex-
press and Webpack. I wanted to show its absolute growth over a longer period of
time and this chart helps us to see that relative to other packages exhibiting similar
growth to React.

Progress.com 28
A great metric to follow is npm downloads in comparison to other frameworks. I think
this is a good indication that React continues to be a force in the JavaScript devel-
oper community and continues to be a10pt pick from a popularity standpoint.

I think npm stats are the best thing we have to determine the popularity of the
different JavaScript frontend frameworks, but there are other surveys and polls out
there that can help us understand where React has come from 2018 and where it’s
going in 2019. Specifically, the State of JavaScript 2018 survey.
10pt
This report has valuable information around JavaScript and, as a professional, it can
aid in decision making or just make you happy or sad about your favorite
framework.

No reason to be sad here though, React developers couldn’t be happier with the
results. Let’s revisit the overview section of the frontend frameworks that we touched
on in the previous chapter about Vue.js.

Progress.com 29
We can see which frameworks are popular among survey participants, as well as
which they have used or would like to use in the future. In the “Used it, would use
again” category, React is strong, but we see other frameworks with good showings as
well.

I would also say that this survey must be taken with a grain of salt as I feel the da-
taset may be tilted toward React, partially due to the authors’ background and the
community the survey stems from. But it’s still something we should take into con-
sideration when gauging React’s overall popularity and that still is a measurement
many companies look at before making a decision on picking a framework or library,
with good reason.

Another interesting graphic from this survey data is “Most liked aspects of React”,
which helps to shine a light on areas where users think the React team could im-
prove.

Progress.com 30
I think that most issues for why developers dislike React is being addressed some-
how in the minor 2018 releases (16.3 to 16.7). I spoke in Bulgaria at the DevReach
2018 conference about the improvements to React over the course of 2018 and what
I think they mean for the future of React. So, it’s reassuring to see that the reasons I
love React are also reasons others have said they like it too.

To get a better overview of how React fared in this State of JavaScript 2018 survey,
I have done a rather extensive review and given my own thoughts in a blog post
titled: A React State of Mind (State of JavaScript Survey 2018)

A State Management Revolution

From the earliest versions of React, there’s always been a way of handling state that
encouraged a one-way data model. But using setState was always tricky for new-
comers to React. Even after learning the ropes, it was still possible to introduce bugs
when using React Core’s own state solution.

Progress.com 31
SetState was often misunderstood and, at a certain point, developers would flat out
stop using it. This is because setState is asynchronous and it causes unnecessary
renders in certain situations, as well as for the fact that sometimes developers didn’t
know when to use setState vs. manage state on their own.

In 2017 and 2018, React Fiber was introduced as React 16. In fact, we are still on this
same semver major version number now with 16.7 just recently being released. But
when the version number was bumped to 16, we got an entire rewrite of the React
engine and this rewrite was codenamed React Fiber.

Most of the information around the reason for the rewrite was jammed into several
talks that took place at React Conf 2017, but this rewrite paved the way for some-
thing that I believe will change the way we write React code in 2019. The community
has embraced React Hooks.

Because of the nature of React’s one-way dataflow, and its close relation to the
library Redux, React released an alpha in November of 2018 that redefined how
to work with statusingthe useState, useEffect and useReducer hooks. The
release of React 16.8 on February 6, 2019, ushered in this paradigm shift and is prob-
ably the most important and notable change in React that will create the biggest
impact in 2019—not only in React, but also in JavaScript in my opinion.

Before the introduction of Hooks, we had the concept of class components, which
you could use to build components that needed to manage state and have lifecycle
methods and other things that could only be done in classes. One of the drawbacks
to prolifically using classes in React or anywhere for that matter is how .this is
treated. One would have to bind functions and do extraneous work to both provide
interaction in the component as well as manage state.

We also had the idea of “functional stateless components” before React 16.8 (Stable
Hooks Release) in which the functional component model provided a much more
concise ES6 style syntax with the ability to get away from using the .this key-
word and allowed for less ceremony and syntax in the component. It also set the
scene for React components to become world class. You see, in the past, when you
would create these types of functional stateless components, it typically meant that
they would only receive input (props) and not manage any state. Even though you
could not use React’s built-in state, it was obvious how powerful writing components
this way could be. But for the time being, the drawbacks were that you couldn’t inter-
act with React’s state and you couldn’t include lifecycle methods.

Progress.com 32
But now that is all in the past. To quote Cory House in a 2016 Hacker Noon Article:
“React stateless functions offer the most elegant approach I’ve seen for creating a
reusable component in any popular framework.”

In creating Hooks, the React team gave us an easy and more pure way to write
components in a functional ES6 style syntax that required the developer to think
more about composition. Which components will be smart, which ones dumb, which
are presentational and which ones are wrappers and deal with fetching data etc.
This was great to have during a period of time where we were forced to think deeply
about what each component did and why we would use one over the other. What
you could do with the functional stateless components was minimal, but it made us
aware of the possibilities and it kept you honest and promoted lean design.

With React Hooks, you can now use them to tap into React state and lifecycle meth-
ods and get all the other benefits that class components gave us. The new tools
to do this are: useState and useEffects, they also provided a Hook called
useReducer which enables a Redux style pattern for simple UI state management.
We now have an abstraction around setState() that can incorporate actions and
reducers plus we can manage that internal UI state in a similar fashion to how we
manage our data and it’s state within our apps.

What Major Changes Did 2018 Bring?

In 2018, we bore witness to a major master plan laid out release by release by the
React team. Never bumping a major version, every release was minor. This is impor-
tant to note—in order to roll out the major changes of 2018 and not break the old
way of doing things, the React team had to ensure that each new feature released
was backwards compatible with existing features.

We also saw an update to React’s most popular CLI tool, Create React App, which we
covered in detail in our Hello Create React App 2.0 article back in October of 2018.

Below is a list of the React minor releases from 2018:

• 16.3 (Mar 29, 2018): New Lifecycles and Context API
• 16.4 (May 23, 2018): Pointer Events
• 16.5 (Sept. 5, 2018): React Profiler and Suspense
• Create React App 2 (Oct. 01, 2018)
• 16.6 (Oct. 23, 2018): Lazy, Memo & contextType
• 16.7 (Dec. 19, 2018): Bug fixes and patches (No Hooks yet)

Progress.com 33
In the first release of 2018, we had something called Context API finally get shipped.
Context API meant we could share data using a provider and allow a tree or group
of components in our application to share the same context. The initial implementa-
tion used tags that would allow you to wrap a number of components and provide
them all with this context. As you can imagine, this was a step in the right direction.
However, in complex scenarios, this can start to breakdown, having to wrap providers
and consumer tags around areas of the code where you wanted to have access to
that context.

Hooks brought us the useContext hook and overnight, we all breathed a sigh of
relief.

Long live Hooks, it’s a revolution in React this year. If you don’t believe me, wait and
see. I write about all of these Hooks and show you the before and after as well as
how to work with each of them in the following articles:

React Hooks - State & Effect React Hooks - Context React Hooks - Reducers

As well, if you are using the KendoReact library in your web development and are
looking for a Hooks version of your favorite StackBlitz demos for KendoReact, I have
a growing list of demos I have converted to use Hooks over on Dev.to: KendoReact
Components (Functional Hook Style) as well as an article that encourages develop-
ers to get started with Hooks ASAP: Can I Use React Hooks Yet?

React’s Impact in 2019

The first release of 2019 was: React v16.8: The One with Hooks. With this release, we
no longer need to use the alpha to gain access to these new features we have been
speaking about that Hooks bring to the table.

React’s composable approach has proved viable and sustainable over the past few
years. It’s ecosystem will chalk up another year of growth continuing to grow rapidly.
It’s tools have seen a gain in popularity, these tools, a lot of them are framework ag-
nostic, benefit JavaScript as a whole. Hooks and its ability to tap into functions from
functional components make code a lot more shareable. Even the Hook pattern is
spreading into other libraries and it appears to be due to its success in React. Again
this benefits JavaScript as a whole. Finally, our very popular state management li-
brary in JavaScript is Redux. It can be used with Angular, Vue, Svelte or whatever, my
point is that I think React will continue to influence the overall JavaScript Ecosystem.

Progress.com 34
GraphQL will see more adoption in 2019 and the language’s growth is not specific to
React. Look specifically for GraphQL to make a major contribution to JavaScript and
become a prolific way of building APIs in 2019.

Having tools with close ties to React but are also agnostic will be a huge win for the
JavaScript community and ecosystem as a whole, as it ensures growth outside of the
React community. I think we will see a lot of adoption of these related technologies
and ideas.

Hooks are already inspiring other areas of JavaScript and to be honest, the concept
of Hooks are not new with React. Other libraries are already using something similar.

Check out @Getify’s TNG-Hooks, how to build your own React Hooks and one of
the collections of Hooks on Github. Hooks are having an impact on how we can
organize, write and share JavaScript.

Another area of React that I think is the next logical progression for a lot of React
developers is something called Next JS. This is a minimalist framework for render-
ing React on the server and it’s an amazing offering to help with server-side React. It
helps to automatically code split, do hot routing, file-based routing and mapping of
routes available. There are several crash courses on YouTube if you have not heard
of it.

Be ready—2019 is going to be an amazing year for React.

Progress.com 35
Angular in 2018 -2019
By Sebastian Witalec

Angular is one of the most popular frontend frameworks out there and is currently
enjoying a significant growth year over year.

In November 2018, the traffic to the Angular Docs reached 1.5 million monthly visi-
tors, which increased by more than 50% from the previous year.

This continuous growth of the Angular Community doesn’t surprise me at all, all it
takes is a short look at the Angular team’s values:
• Apps that users love to use
• Apps that developers love to build
• A community where everyone feels welcome

This clearly illustrates the full story that: Angular team looks after the users, the
developers and the community, and that is what makes Angular great.

The Big Selling Points

For me, the biggest selling point (based on both my personal experience and con-
versations with other developers) is that Angular out of the box provides me with
everything I need to build a high performance app with a great user experience.

Progress.com 36
Unlike in some other cases, I don’t have to start by making a lot of choices, like which
router to use or whether to declare my components with Classes or Functions. All I
need is to run a simple ng new [name] and the Angular CLI will create a project
with everything that I need. The only choice you have to make is whether to use tabs
or spaces (SPACES ).

Now combine the boilerplate provided by the Angular CLI together with the Angular
Style Guide and you get a recipe for a great “Team Scalability”. I found it fairly easy to
expand a team for ongoing Angular projects. You add a new Angular dev to a team
and immediately this person knows what is what, and where to find everything. All
you need to take care is transferring the application domain knowledge.

This consistency is even more important when building enterprise applications. You
can trust Angular to provide you with all the right tools and design patterns to be
successful.

Even more importantly Angular offers Active and Long-Term Support for all major
releases. All major releases are supported for 18 months, with 6 months of active
support, during which regularly-scheduled updates and patches are released. This is
then followed by 12 months of long-term support, during which only critical fixes and
security patches are released.

What Changed in 2018

In 2018, the Angular team introduced many interesting updates.

Some of them were enabled by an introduction of Schematics, which is a workflow

tool for transforming your project.

In simple terms Schematics, allows us to create special scripts (referred to as Sche-

matics), that can analyze existing files, and make changes to them and/or generate
brand new files (ng generate uses Schematics to do the job).

Progress.com 37
From the Angular Team

Here are my top three changes in the Angular world:

1. ng update + Angular Update Guide

10pt
In the past, many would be worried about upgrading their Angular projects (and the
same goes for other frameworks as well) to the next major version of the framework.
But let’s be honest the amount of changes required to actually update from Angular
5 to 6 to 7 has been really minimal.

To aid us in this, the Angular Team published the Angular Update Guide, a dynamic
guide on how to upgrade an Angular Project, which gives us clear, step-by-step
instructions on how to perform a clean and successful upgrade.

To take it to the next level, the Angular team enhanced the Angular CLI with a new
command: ng update, which updates your application and its dependencies.

The ng update does a lot more than just updating the versions of your npm pack-
ages. It can also take care of fixing breaking changes in your code. I mean

To make it better, ng update is open to third-party library vendors, which allows

them to implement their own Schematics for a smooth upgrade process.

2. ng add

Another great enhancement to the Angular CLI is the ng add command. It enables
plugin authors to implement Schematics that take care of the necessary steps to use
their library in Angular projects.

Stephen Fluin: It allows you to move faster, automate away all of the setup steps that
typically come with new dependencies.

• Would you like to add Angular Material components to your project? Just run:
ng add @angular/material
And boom, your project is ready to go.

• Want to use Kendo UI components in your project as well? Run:

ng add @progress/kendo-angular-buttons
And bada boom, now you have Kendo UI buttons and you’re ready to rock.

Progress.com 38
 • Want to add native mobile to your project? Read more on it below... but yeah:
ng add @nativescript/schematics
That will do the trick!

3. cdk improvements

The final top three pick goes to the Component Dev Kit (CDK). It is a set tools that
allows you to use the core functionalities found in the Angular Material library, but
without the styling that comes with Material Design.

CDK gives you all the benefits that the Angular Material brings to the table (bul-
letproof functionality like: Accessibility, Drag-and-Drop, etc), while you retain the full
control of the look and feel of your UI components.

From the Community

Every year, there are many great tools and libraries coming from the community,
making Angular even greater.

Here are my top picks:

Angular Console

One of my favorites is the Angular Console. It provides a GUI on top of the Angu-
lar CLI, which allows you to use the Angular CLI in a visual way. You don’t have to
remember any of the commands or flags that come with the CLI.

But the Angular Console is a lot more than that. It basically takes care of most of the
tasks that you used to trigger manually via a stylish UI. Need to update your npm
packages? Done, click here. Need to run a schematic? Done, click there. Need to find
other Schematics? Done, look at all these babies. Need to kick off your tests? Yup,
just click over there. The list goes on.

Sure, not everyone likes to work outside of their console, many still haven’t figured
out how to exit their Vims. However, there are a lot of people that like to work with
visual tools.

Progress.com 39
Code Sharing: Web + Mobile

Another great community contribution worth noting is the new Code Sharing with
NativeScript. We are talking about building both web and native mobile apps from a
single Angular project.

You could either start with a brand new project by using the Angular CLI and @na-
tivescript/schematics, like this:

ng new app-name --collection=@nativescript/schematics --shared

Or you could convert an existing Angular project to a code-sharing project, by run-

ning:

ng add @nativescript/schematics

Then to serve a web project, you run the usual:

ng serve

Then to build a mobile project, you can run (note, you need to install the NativeScript
CLI for this):

npm run [android | ios]

In most cases, you could easily reuse most of your TypeScript code (for your ser-
vices, components, navigations and pipes), while providing different code for the UI
definition (.html and .css files).

The code splitting is quite simple—just add a .tns extension to a file that you want
to mark for mobile and you are good to go.

Progress.com 40
Check out the NativeScript docs for more info.

Progress.com 41
What to Expect in 2019

In 2019 I expect Angular to reach get even more exciting. The Angular team is work-
ing on some really great initiatives.

Ivy

At ng-conf 2018, Miško Hevery and Kara Erikson talked about a new initiative called
Ivy—the next rendering pipeline for Angular.

Ivy will make Angular output smaller, faster and simpler than it is today, and early ex-
periments with it show that you could shrink the Angular bundle to as little as 3.5 KB.

You can try out the Ivy Demo yourself.

Bazel

The Angular team has been working on some experiments with Bazel and Angular. It
is really interesting to see what they come up with in 2019.

Bazel is a tool that automates builds and tests. It’s language agnostic, offering sup-
port for multiple popular languages. It doesn’t matter whether you need to build
your projects with Java, C++, Objective-C or any other programming language (or
even all of them combined), Bazel can handle them all.

Bazel uses a really clever algorithm to construct the build pipeline. Bazel starts with
the root Bazel Rule (a Bazel Rule is like a build step), it looks at rule Dependencies

Progress.com 42
(basically anything it needs to execute the rule) and it will move onto building each
dependency (each dependency is a Bazel Rule itself). It then recurrently checks what
these dependencies need and so on. This results in a tree-like pipeline where each
new branch is a dependency of a parent rule and each leaf is a rule with no further
dependencies. Once we have the full tree, Bazel can execute the full build, starting at
the leaves and finishing at the root. For an added extra performance boost, rules that
are ready for build get executed in parallel.

But this is how it works the first time. Next time you perform the build again, Bazel
doesn’t need to rebuild each leaf and branch from scratch. Instead it will only rebuild
those that changed and the branches that depend on the changed nodes. Mean-
ing you won’t see much of build time boost on the first round, but each consecutive
build will be lightning fast.

Additionally, because Bazel can build all of its dependencies, that means it could
even build a specific version of Node, and then perform a build with that specific ver-
sion of Node. The result: no more issues with conflicting versions of tooling between
machines, as they would all get what they need. How cool is that?

This is just the tip of the iceberg.

“The JavaScript community has gotten into the pattern that every devserver, bundler
or test runner tool has to accept the original program sources as inputs, and that means
each tool gradually expands its scope to include a build system. It starts trivial (just
call the Babel API) and expands to include ESnext transpilers, CSS preprocessors,
framework compilers, HTML injection and more. We are fortunate to have a community
of developers contributing all these plugins to each tool. However, the resulting system
inhibits innovation. A new language tool needs to have plugins for every popular
builder, and a new builder tool needs to have plugins for every popular language.
We’d be better served by keeping layering distinct, so that bundlers, devservers and
test runners can re-use a composable build system that already has an ecosystem of
language plugins.”

Alex Eagle, from the Angular team

You could already use Bazel to build Angular. To learn more, check out the Angular
Bazel Example Wiki. You could also see the canonical example maintained by the
Angular team at Google.

Progress.com 43
You can find out more about ABC (Angular Buildtools Convergence) from this docu-
ment.

Here is an article on how we approached Building NativeScript Apps with Google’s

Bazel.

Progress.com 44
jQuery
by John Bristowe

jQuery continues to be very popular in the web application space. The statistics for
jQuery can vary across organizations measuring its use on the web; the general con-
sensus is that it continues to be a popular library. At the time of this writing, jQuery
is the most popular JavaScript library used across the top 1 million sites according to
BuiltWith. For many web developers, jQuery provides a valuable set of functions for
performing operations like HTML document traversal, animations and event han-
dling in a way that’s compatible across browsers.

The most recent stable release (v3.3.1) shipped on January 20, 2018. The release of
v3.4.0 is anticipated to ship sometime in 2019. At the time of this writing, v3.4.0 is
70% complete (38 closed issues, 16 open issues) according to its milestone tracker
on GitHub. Generally, the next version of jQuery is not expected to add many new
features (jQuery 3.4.0 roadmap). The latest version of the library is quite stable.
Furthermore, the development team favors a philosophy adding features only when
necessary and when a particular set of criteria is met. Often, newer versions of
jQuery will see more deprecations than features. That’s in large part to innovations
in the underlying browsers along with their usage trends have reduced/eliminated
the necessity for certain functions. It is likely that jQuery 3.4.0 will deprecate some of
these functions. It is also likely that some minor features will also be added to exist-
ing functions to support the evolving nature of the underlying platform.

Looking ahead, jQuery will continue to be a popular choice for building web applica-
tions in 2019. It remains integrated in popular frameworks like Bootstrap and by or-
ganizations like Progress through products like Kendo UI. (That stated, Bootstrap v5
will drop jQuery.) Despite this ongoing popularity, some web developers will choose
to move away from it for a variety of reasons. Additionally, increased complexity of
requirements may necessitate migrating to a framework like Angular, React, or Vue.
This sentiment is expressed by web developers on social media and evidenced by
the growing popularity of sites like You Might Not Need jQuery.

Progress.com 45
Kendo UI
by John Bristowe

Kendo UI is a UI component library for jQuery, Angular, React and Vue. These com-
ponents enable developers to quickly build eye-catching, high-quality, high-perfor-
mance responsive web apps. They cover a wide range of use cases, including form
input, navigation, scheduling, data management, charts and more.

For Kendo UI, 2018 was a significant year. Over the course of the year, three major
releases were shipped along with three service packs. These releases resolved hun-
dreds of issues and added many new features. Some of these new features included
the following:
• New components like the DropDownTree, MultiColumnComboBox, and Arc-
Gauge
• Numerous improvements to popular components such as the Grid and Spread-
sheet
• New chatbot framework-agnostic UI components known as Conversational UI
• Native implementations for React and Vue

Looking ahead to what’s coming in 2019, Kendo UI will continue to evolve to sup-
port developers building the next generation of web apps. This includes adding new
components as well as making numerous improvements to the components that
already exist. This commitment also pertains to the underlying libraries and frame-
works that Kendo UI supports (i.e. jQuery).

With the UI components from Kendo UI, we are as fully committed as we have ever
been. Since this is a library that has a large active user base, our focus will be on
ensuring that these UI widgets are as robust as possible and that each release is the
most stable yet. On top of this, we will continue to tackle highly voted and requested
items from our feedback portal and innovate where possible to deliver UI components
based on modern UX trends that our users will want to take advantage of.

Carl Bergenhem, Product Manager for Kendo UI

More information about the Kendo UI Roadmap is available online. Additionally, cus-
tomers can submit suggestions on the future direction of the product through the
Feedback Portal for Kendo UI.

Progress.com 46
“JavaScript-Native” Mobile Development
By Rob Lauer and TJ VanToll

Time certainly flies when you realize it’s been almost four years since some of the
most popular “JavaScript-native” frameworks were first released! Born back in 2015,
React Native and NativeScript both provide a similar model for JavaScript develop-
ers to crack into the truly native mobile development world. By using web skills like
JavaScript, Typescript and CSS, along with established frameworks like React, Angu-
lar and Vue.js, these development options have created a new market for traditional
web developers.

While the popularity of these frameworks is growing, some high-profile companies

like AirBnb have decided to scale back their usage of React Native. Where does this
put JavaScript-native on the map today, where is it headed in 2019 and how does the
upstart Dart-based Flutter come into play?

What is a JavaScript-native framework? Hybrid app development frameworks

like PhoneGap/Cordova/Ionic let you use your web skills (HTML/CSS/JavaScript) to
create natively installable apps. However, hybrid-based apps run in a WebView, which
presents performance and non-native UI limitations. JavaScript-native frameworks
like NativeScript and React Native use JavaScript (and CSS) to power (and style)
truly native UI on the device, without any WebViews, giving you the API reach and
performance you demand.

JavaScript-Native Today

For two years running, we’ve predicted a strong and steady rise in the adoption of
both React Native and NativeScript, and we haven’t been disappointed:

Progress.com 47
Monthly npm downloads of the react-native and nativescript npm packages from
2017–2018 (source)

Year-over-year growth in adoption of both frameworks have been impressive, consid-

ering they are not necessarily competitors, but rather complimentary frameworks.

React Native

Boosted by the rise of React over the past few years, React Native is THE way to de-
velop native mobile apps with the React library. 73K GitHub stars and 45K questions
on Stack Overflow make it clear how popular React Native has become. For React
Native, 2018 was another monster year, with companies like Facebook (of course),
Walmart and Bloomberg relying on it to power at least parts of their existing popular
native mobile apps. However, Airbnb was extremely public in their dismissal of React
Native, stating “its benefits didn’t come without significant pain points”.

Undeterred, the future remains bright for React Native:

“We’re working on a large-scale re-architecture of React Native to make the frame-

work more flexible and integrate better with native infrastructure in hybrid JavaS-
cript/native apps.” - State of React Native, 2018

Going forward, the React Native team looks to be making the framework more
lightweight and better able to fit into existing iOS and Android apps. By changing
the threading model to one that is more similar to NativeScript, they hope to improve
performance and stability. They are also incorporating async rendering capabilities
into React Native to allow multiple rendering priorities and to simplify asynchronous
data handling. Direct calls between native APIs and JavaScript will also be more ef-
ficient and easier to debug.

NativeScript

Like React Native, NativeScript lets you use your web skills to create truly native mo-
bile apps for iOS and Android. Unlike React Native, NativeScript provides official sup-
port for the Angular and Vue.js frameworks, along with plugin-free access to 100% of
native device APIs. Large companies like SAP are betting on NativeScript, and the #1
app in the U.S. app stores over the holidays was a NativeScript-built app.

Progress.com 48
Portable North Pole, a NativeScript-built app, was the #1 trending app in the U.S. iOS
App Store over the holidays.

Where Does NativeScript Appear to Be Headed in 2019?

While the core NativeScript framework has matured, there is always room for improv-
ing the developer experience, which is precisely the priority for the team in 2019.

By improving on capabilities such as Hot Module Replacement and adding additional

support for CSS properties, the hope is to bring NativeScript as close as possible to a
fast, iterative, workflow that we are all used to on the web.
Hot Module Replacement, a
feature NativeScript shipped
in 2018, significantly speeds
up how fast you can develop
JavaScript-Native apps.

Progress.com 49
The NativeScript team also wants to enable developers to create beautiful apps, by
offering a full Material Design library out of the box. Both Angular and Vue.js devel-
opers will rejoice when they find that the “NativeScript to Web” code sharing stories
will be a priority in 2019 as well.

Flutter

Yes, even though Flutter requires you to develop with Dart, not JavaScript, we are
including it here!

The new kid on the block in 2018 was certainly Flutter. A product of Google, Flutter
also lets you build native apps for iOS and Android from a single codebase. Flutter’s
architecture is very different from both NativeScript and React Native though, as in-
stead of leveraging platform-specific native UI, you build your app UI on top of a 2D
rendering engine. This leads to great performance, smaller app sizes, but a consider-
ably steeper learning curve than React Native or NativeScript.

Flutter was a big hit in 2018, scoring 52K GitHub stars and 10K questions on Stack
Overflow.

The big downside to Flutter for JavaScript developers is that you must write your
apps in Dart, which is definitely a learning curve. Furthermore, Flutter has no markup
language, meaning you must write not only your code in Dart, but also your UI layer
as well—and code like this can get kind of messy.
An example of what writing your
UI looks like in Flutter (source).

Progress.com 50
2019 will be a year to see if Flutter can overcome these obstacles and take off with
JavaScript developers, as Google continues to stabilize and extend the framework.

Moving Forward with JavaScript-Native

Rising tides lift all boats, and with React Native, NativeScript and Flutter as tools,
mobile app development has become more accessible to web developers than ever
before. But how are these frameworks going to build on their successful pasts?

Developing with any of the JavaScript-native options today provide table stakes
functionality in terms of native iOS and Android development with some amount of
shared code between the two mobile platforms. And while keeping up with the latest
releases and APIs from Apple and Google will always be a priority, React Native has
publicly stated their concerns with improving stability; NativeScript with focusing on
developer productivity; and Flutter with targeting ease of adoption and core funda-
mentals.

With an argument that these frameworks are approaching a “feature-complete” state,

where do we see them headed later in 2019?

To the Web!

Wait a minute, didn’t we just come from the web? Yes, but hear me out. Developing
omni-channel mobile experiences is becoming a more and more critical component
of what it means to create an “app” today. Responsive/mobile web, PWA, native iOS,
native Android—that’s arguably four distinct platforms to share a single experience.

This is where initiatives like React Native Web, NativeScript Schematics and Flutter’s
Hummingbird come into play. With the ability to create responsive web experiences
along with native iOS and Android apps, these frameworks are leading the way to
advanced developer productivity and time-saving capabilities.

Progress.com 51
 An example of building
an iOS, Android, and web
app simultaneously using
NativeScript.

The ability to develop multiple apps from one codebase, using one architecture and
language, provides an enticing option for any team that needs to develop for native
and the web simultaneously. Because of all these advantages, we see code-sharing
approaches to boom in popularity in 2019.

To Native Developers

Finally, our last prediction is one that jumps outside of the realm of the JavaScript
world. With the growing power and stability of frameworks like NativeScript, React
Native and Flutter, we expect these tools to attract a growing number of iOS and
Android developers.

Progress.com 52
Native developers already struggle with cross-platform development, as building and
maintaining completely separate apps for iOS and Android can take a huge toll on
any team or business. With the demand for native apps continuing to grow, we an-
ticipate many native development teams will switch to JavaScript-Native frameworks
to meet their needs.

Outro

For all of the Advocates here at Progress, we hope you have enjoyed our summary
of 2018! We understand that the JavaScript community can often be torn apart by
not only its fast paced nature, but also the competitive nature of its community of
devs. Our hope is to not only illuminate what is happening and spread light on the
changes/updates, but also to celebrate our differences. JavaScript has a diverse and
wonderful community of developers and therefore has an equally incredible variety
of frameworks. We believe, this fact, in the long run, will be our strength. Thank you
for being a part of this crazy ride.
10pt

Here’s to 2018!

Happy Coding <3 from the Developer Advocates at Progress

Jen Sebastian
Looper Witalec

Alyssa John
Nicoll Bristowe

TJ Rob
VanToll Lauer

Eric
Bishard

Progress.com 53
About Kendo UI – Our Complete
JavaScript UI Component Library
Kendo UI allows you to quickly build eye-catching, high-quality, high-performance web-based apps
integrated into your technology of choice (jQuery, Angular, React, or Vue). Kendo UI offers a large library
of popular components from sophisticated grids, charts and schedulers to dropdowns and menus. Use the
library’s 70+ customizable UI components to build better web apps faster.

Get started with a free trial

About Progress Worldwide Headquarters

Progress (NASDAQ: PRGS) offers the leading platform for Progress, 14 Oak Park, Bedford, MA 01730 USA
developing and deploying strategic business applications. Tel: +1 781 280-4000 Fax: +1 781 280-4095
We enable customers and partners to deliver modern, high- On the Web at: www.progress.com
impact digital experiences with a fraction of the effort, time Find us on facebook.com/progresssw
and cost. Progress offers powerful tools for easily building twitter.com/progresssw
adaptive user experiences across any type of device or youtube.com/progresssw
touchpoint, award-winning machine learning that enables For regional international office locations and contact information,
cognitive capabilities to be a part of any application, the please go to
flexibility of a serverless cloud to deploy modern apps, www.progress.com/worldwide
business rules, web content management, plus leading data
connectivity technology. Over 1,700 independent software
vendors, 100,000 enterprise customers, and two million
developers rely on Progress to power their applications. Learn
about Progress at www.progress.com or +1-800-477-6473.

Progress and Telerik Kendo UI by Progress are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in
the U.S. and/or other countries. Any other trademarks contained herein are the property of their respective owners.

© 2019 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Rev 19/05 | RITM0041255

Progress.com 54