VTS185: JavaScript 2018, State and Trends

@MacMladen JavaScript 2018: State and Trends v.1 2018-05-10
]{
JavaScript
2018: STATE AND TRENDS
1
Mladen Đurić
@MacMladen
Visoka tehnička škola strukovnih studija Novi Sad
Predavaona, 10.05.2018.

View Slide

@MacMladen
]{
JavaScript 2018: State and Trends v.1 2018-05-10 2
MLADEN ĐURIĆ
a.k.a MacMladen
$ whoami
A very boring incompetent guy

View Slide

@MacMladen
]{
As soon as I started learning to code I was so fascinated and wanted to
share what I learned. I was hardly into secondary school when I organized
ﬁrst computer club and gave ﬁrst BASIC course. It was around 1982.
In 2016 I have started a Professional Web Development School ]{oder.

View Slide

@MacMladen
]{
JavaScript 2018: State and Trends v.1 2018-05-10
All about us
]{ODER
4

View Slide

@MacMladen
]{
ENROLL TO GET NOTIFIED

View Slide

@MacMladen
]{
]{oder for VTŠ students:
JavaScript 
Learning by doing 
special student discount
Jun 18th — Jul 13th
4 weeks, everyday

View Slide

@MacMladen
]{
]{oder for enthusiasts:
JavaScript 
Learning by doing 
special enthusiast discount
May 21th — Jun 15th
4 weeks, everyday

View Slide

]{
JavaScript
IS KIND OF JAVA LIGHT? ;)
8

View Slide

]{
9
JavaScript
modern swiss army knife programming language
NO. It is not Java light.
JavaScript (/ˈdʒɑːvəˌskrɪpt/), often abbreviated as JS, is a high-level, interpreted
programming language. It is a language which is also characterized as dynamic, weakly typed,
prototype-based and multi-paradigm.
HTML, CSS and JavaScript are the three core technologies of the World Wide Web.
Although there are similarities between JavaScript and Java, including language name, syntax,
and respective standard libraries, the two languages are distinct and differ greatly in design.

View Slide

@MacMladen
]{
INTRODUCE
YOURSELF!
10
• Used JavaScript in browser, frontend, backend?
• Your ﬁeld? (web designer, frontend developer)
• Coding experience? (none, some, pro)

View Slide

@MacMladen
]{
TIMETABLE:
1. JavaScript Creation
2. JavaScript Standards
3. JavaScript Features
4. JavaScript Has
Already Won
5. JavaScript Trends
6. JavaScript Articles
7. JavaScript Courses
8. JavaScript Books
11

View Slide

]{
JavaScript CREATION
12

View Slide

@MacMladen
]{
BRENDAN EICH
13

View Slide

@MacMladen
]{
TEN DAYS OF MAY IN 1995
14
Before he could get started, Netscape Communications collaborated with
Sun Microsystems to include in Netscape Navigator Sun's more static
programming language Java, in order to compete with Microsoft for user
adoption of Web technologies and platforms.
Netscape Communications then decided that the scripting language they
wanted to create would complement Java and should have a similar
syntax, which excluded adopting other languages such as Perl, Python,
TCL, or Scheme.
To defend the idea of JavaScript against competing proposals, the
company needed a prototype.
Brendan Eich wrote JavaScript prototype in 10 days, in May 1995.

View Slide

@MacMladen
]{
Mocha, LiveScript…
15
Although it was developed under the name Mocha, the
language was officially called LiveScript when it first shipped
in beta releases of Netscape Navigator 2.0 in September
1995, but it was renamed JavaScript when it was deployed in
the Netscape Navigator 2.0 beta 3 in December.
The final choice of name caused confusion, giving the
impression that the language was a spin-off of the Java
programming language, and the choice has been characterized
as a marketing ploy by Netscape to give JavaScript the cachet
of what was then the hot new Web programming language.

View Slide

]{
JavaScript STANDARDS
16

View Slide

@MacMladen
]{
ECMAScript
17
• ECMAScript 1, ECMA-262 June 1997
• ECMAScript 2, ISO/IEC 16262, June 1998
• ECMAScript 3, December 1999 
the baseline for modern day JavaScript
• ECMAScript 4 — never.

View Slide

@MacMladen
]{
JAVASCRIPT REBORN
18
In 2005, Jesse James Garrett released a white paper in
which he coined the term AJAX, and described a set of
technologies, of which JavaScript was the backbone, used
to create web applications where data can be loaded in the
background, avoiding the need for full page reloads and
leading to more dynamic applications.
This resulted in a renaissance period of JavaScript usage
spearheaded by open source libraries and the communities
that formed around them, with libraries such as Prototype,
jQuery, Dojo Toolkit, MooTools, and others being released.

View Slide

@MacMladen
]{
ES6, ES…
19
• ECMAScript 5, December 2009.
• ECMAScript 5.1, ISO/IEC 16262, June 2011
• ECMAScript 2015, a.k.a ES6 June 2015
• ECMAScript 2016, June 2016
• ECMAScript 2017, June 2017

View Slide

@MacMladen
]{
BROWSER COMPATIBILITY
20

View Slide

@MacMladen
]{
VANILLA JAVASCRIPT
21
JavaScript not extended by any frameworks
or additional libraries.
Scripts written in Vanilla JS are plain
JavaScript code.

View Slide

@MacMladen
]{
JavaScript FEATURES
22

View Slide

@MacMladen
]{
UNIVERSAL SUPPORT
23
All modern Web browsers support JavaScript
with built-in interpreters.

View Slide

@MacMladen
]{
IMPERATIVE AND STRUCTURED
24
JavaScript supports much of the structured programming syntax from
C (e.g., if statements, while loops, switch statements, do while loops,
etc.).
One partial exception is scoping: JavaScript originally had only function
scoping with var. ECMAScript 2015 added keywords let and const
for block scoping, meaning JavaScript now has both function and block
scoping.
Like C, JavaScript makes a distinction between expressions and
statements. One syntactic difference from C is automatic semicolon
insertion, which allows the semicolons that would normally terminate
statements to be omitted.

View Slide

@MacMladen
]{
DYNAMIC
25
TYPING
As with most scripting languages, JavaScript is dynamically typed;
a type is associated with each value, rather than just with each
expression. For example, a variable that is at one time bound to a
number may later be re-bound to a string. JavaScript supports
various ways to test the type of an object, including duck typing.
RUN-TIME EVALUATION
JavaScript includes an eval function that can execute statements
provided as strings at run-time.

View Slide

@MacMladen
]{
OBJECT-ORIENTED (PROTOTYPE-BASED)
26
JavaScript is almost entirely object-based. In JavaScript, an object is an associative
array, augmented with a prototype. Each string key provides the name for an object
property, and there are two syntactical ways to specify such a name:
• dot notation — obj.x = 10
• bracket notation — obj['x'] = 10
A property may be added, rebound, or deleted at run-time. Most properties of an
object (and any property that belongs to an object's prototype inheritance chain) can
be enumerated using a for...in loop.
JavaScript has a small number of built-in objects, including Function and Date.
• Prototypes
• Functions as object constructors
• Functions as methods

View Slide

@MacMladen
]{
FUNCTIONAL
27
A function is ﬁrst-class; a function is considered to be an object. As
such, a function may have properties and methods, such
as .call() and .bind().
A nested function is a function deﬁned within another function. It
is created each time the outer function is invoked. In addition, each
nested function forms a lexical closure: The lexical scope of the
outer function (including any constant, local variable, or argument
value) becomes part of the internal state of each inner function
object, even after execution of the outer function concludes.
JavaScript also supports anonymous functions.

View Slide

@MacMladen
]{
DELEGATIVE
28
JavaScript supports implicit and explicit delegation.
FUNCTIONS AS ROLES (TRAITS AND MIXINS)
JavaScript natively supports various function-based implementations of Role patterns like
Traits and Mixins. Such a function deﬁnes additional behavior by at least one method bound
to the this keyword within its function body. A Role then has to be delegated explicitly via
call or apply to objects that need to feature additional behavior that is not shared via the
prototype chain.
OBJECT COMPOSITION AND INHERITANCE
Whereas explicit function-based delegation does cover composition in JavaScript, implicit
delegation already happens every time the prototype chain is walked in order to, e.g., ﬁnd a
method that might be related to but is not directly owned by an object. Once the method is
found it gets called within this object's context. Thus inheritance in JavaScript is covered by
a delegation automatism that is bound to the prototype property of constructor functions.

View Slide

@MacMladen
]{
MISCELLANEOUS
29
RUN-TIME ENVIRONMENT
JavaScript typically relies on a run-time environment (e.g., a Web browser) to provide objects and
methods by which scripts can interact with the environment (e.g., a webpage DOM). It also relies on the
run-time environment to provide the ability to include/import scripts (e.g., HTML elements). This is not a language feature per se, but it is common in most JavaScript implementations. JavaScript processes messages from a queue one at a time. Upon loading a new message, JavaScript calls a function associated with that message, which creates a call stack frame (the function's arguments and local variables). The call stack shrinks and grows based on the function's needs. Upon function completion, when the stack is empty, JavaScript proceeds to the next message in the queue. This is called the event loop, described as "run to completion" because each message is fully processed before the next message is considered. However, the language's concurrency model describes the event loop as non- blocking: program input/output is performed using events and callback functions. This means, for instance, that JavaScript can process a mouse click while waiting for a database query to return information. • Variadic functions • Array and object literals • Regular expressions 

View Slide

@MacMladen
]{
KEYWORDS
RESERVED KEYWORDS AS OF ECMASCRIPT 2015
30
break
case
catch
class
const
continue
debugger
default
delete
do
else
export
extends
finally
for
function
if
import
in
instanceof
new
return
super
switch
this
throw
try
typeof
var
void
while
with
yield

View Slide

@MacMladen
]{
KEYWORDS
FUTURE RESERVED KEYWORDS
31
The following are reserved as future
keywords by the ECMAScript speciﬁcation.
They have no special functionality at
present, but they might at some future time,
so they cannot be used as identiﬁers.
These are always reserved:
• enum
The following are only reserved when they
are found in module code:
• await 
The following are only reserved when they
are found in strict mode code:
• implements
• interface
• let
• package
• private
• protected
• public
• static

View Slide

@MacMladen
]{
KEYWORDS
FUTURE RESERVED KEYWORDS IN OLDER STANDARDS
32
The following are reserved as future keywords by
older ECMAScript speciﬁcations (ECMAScript 1 till 3).
• abstract
• boolean
• byte
• char
• double
• final
• float
• goto
• int
• long
• native
• short
• synchronized
• throws
• transient
• volatile
Additionally, the literals cannot be used as identiﬁers
in ECMAScript.
• null
• true
• false

View Slide

@MacMladen
]{
WEB ASSEMBLY
33
All 4 browsers now support Web Assembly.

View Slide

]{
JavaScript HAS ALREADY WON
34

View Slide

@MacMladen
]{

View Slide

@MacMladen
]{
THE WEB
36

View Slide

@MacMladen
]{
THE MOBILE
37

View Slide

@MacMladen
]{
THE DESKTOP
38

View Slide

@MacMladen
]{
BACK-END
39

View Slide

@MacMladen
]{
MERN
40

View Slide

@MacMladen
]{
IoT
41

View Slide

@MacMladen
]{
Adobe PDF
42

View Slide

@MacMladen
]{
APPLICATION AUTOMATION
43
Adobe Illustrator, PhotoShop and InDesign, among others, could be
automated using JavaScript.
JavaScript could be used to automate many more applications under all
operating systems such as macOS, Windows and various UNIX and Linux
ﬂavors.

View Slide

@MacMladen
]{
macOS JXA
44

View Slide

@MacMladen
]{
Windows Universal Platform
45

View Slide

]{
JavaScript TRENDS
46

View Slide

@MacMladen
]{
JAVASCRIPT IS THE MOST WANTED
47

View Slide

@MacMladen
]{
JQUERY 3.3.1 (2006)
48
jQuery, at its core, is a Document Object Model (DOM) manipulation library. The DOM is a tree-structure
representation of all the elements of a Web page. jQuery simplifies the syntax for finding, selecting, and
manipulating these DOM elements. For example, jQuery can be used for finding an element in the document with a
certain property (e.g. all elements with an h1 tag), changing one or more of its attributes (e.g. color, visibility), or
making it respond to an event (e.g. a mouse click).
The principles of developing with jQuery are:
• Separation of JavaScript and HTML: The jQuery library provides simple syntax for adding event handlers to the
DOM using JavaScript, rather than adding HTML event attributes to call JavaScript functions. Thus, it encourages
developers to completely separate JavaScript code from HTML markup.
• Brevity and clarity: jQuery promotes brevity and clarity with features like chainable functions and shorthand
function names.
• Elimination of cross-browser incompatibilities: The JavaScript engines of different browsers differ slightly so
JavaScript code that works for one browser may not work for another. Like other JavaScript toolkits, jQuery
handles all these cross-browser inconsistencies and provides a consistent interface that works across different
browsers.
• Extensibility: New events, elements, and methods can be easily added and then reused as a plugin.

View Slide

@MacMladen
]{
UNDERSCORE 1.9.0 (2009)
49
Underscore consists of a little more than 100 functions,
which fall under four main categories depending on the
datatypes which they manipulate: functions for
manipulating arrays, functions for manipulating
objects, functions for manipulating both arrays and
objects (the name of the category is "Collections") and
functions for manipulating other functions. There are
also two utility categories : "Utility" and “Chaining".
Overtaken by Lodash.

View Slide

@MacMladen
]{
LODASH 4.17.5 (2012)
50
Lodash draws most of its ideas from Underscore.js and now receives maintenance from the original
contributors to Underscore.js.
Lodash is a JavaScript library that helps programmers write more concise and easier to maintain
JavaScript.
Utilities - for simplifying common programming tasks such as determining type as well as simplifying
math operations.
• Function - simplifying binding, decorating, constraining, throttling, debouncing, currying, and changing
the pointer.
• String - conversion functions for performing basic string operations, such as trimming, converting to
uppercase, camel case, etc.
• Array - creating, splitting, combining, modifying, and compressing
• Collection - iterating, sorting, ﬁltering, splitting, and building
• Object - accessing, extending, merging, defaults, and transforming
• Seq - chaining, wrapping, ﬁltering, and testing.

View Slide

@MacMladen
]{
BACKBONE 1.3.3 (2010)
51
Backbone.js is a JavaScript library with a RESTful JSON
interface and is based on the Model–view–presenter
(MVP) application design paradigm. Backbone is known
for being lightweight, as its only hard dependency is on
one JavaScript library, Underscore.js, plus jQuery for use
of the full library.
It is designed for developing single-page web applications,
and for keeping various parts of web applications (e.g.
multiple clients and the server) synchronized.

View Slide

@MacMladen
]{
ANGULAR 6.0 (2010)
52

View Slide

@MacMladen
]{
POLYMER 2.5 (2015)
53

View Slide

@MacMladen
]{
EMBER 3.10 (2011)
54

View Slide

@MacMladen
]{
REACT 16.3 (2013)
55

View Slide

@MacMladen
]{
REACT NATIVE 16.3 (2015)
56

View Slide

@MacMladen
]{
SINGLE PAGE APPLICATIONS
57
A single-page application (SPA) is a web application or web site that interacts with
the user by dynamically rewriting the current page rather than loading entire new
pages from a server.
This approach avoids interruption of the user experience between successive pages,
making the application behave more like a desktop application. In an SPA, either all
necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load,
or the appropriate resources are dynamically loaded and added to the page as
necessary, usually in response to user actions. The page does not reload at any point
in the process, nor does control transfer to another page, although the location hash
or the HTML5 History API can be used to provide the perception and navigability of
separate logical pages in the application.
Interaction with the single page application often involves dynamic communication
with the web server behind the scenes.

View Slide

@MacMladen
]{
PROGRESSIVE WEB APPLICATIONS
58
• Progressive - Work for every user, regardless of browser choice because they’re built with
progressive enhancement as a core tenet.
• Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
• Connectivity independent - Service workers allow work offline, or on low quality networks.
• App-like - Feel like an app to the user with app-style interactions and navigation.
• Fresh - Always up-to-date thanks to the service worker update process.
• Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
• Discoverable - Are identifiable as “applications” thanks to W3C manifests[6] and service
worker registration scope allowing search engines to find them.
• Re-engageable - Make re-engagement easy through features like push notifications.
• Installable - Allow users to “keep” apps they find most useful on their home screen without
the hassle of an app store.
• Linkable - Easily shared via a URL and do not require complex installation.

View Slide

@MacMladen
]{
PROGRESSIVE WEB APPLICATIONS
59

View Slide

@MacMladen
]{
PWA ON GOOGLE DEVELOPER
60

View Slide

@MacMladen
]{
PWA BY ADDY OSMANI
61

View Slide

@MacMladen
]{
PWA BY SMASHING MAGAZINE
62

View Slide

]{
JavaScript ARTICLES
63

View Slide

@MacMladen
]{
JAVASCRIPT
64

View Slide

@MacMladen
]{
ECMASCRIPT
65

View Slide

@MacMladen
]{
WEB ASSEMBLY
66

View Slide

@MacMladen
]{
TOP JAVASCRIPT LIBRARIES 2018
67

View Slide

@MacMladen
]{
JAVASCRIPT LIBRARIES STATUS 2018
68

View Slide

@MacMladen
]{
JAVASCRIPT TRENDS FOR 2018
69

View Slide

@MacMladen
]{
JAVASCRIPT HAS ALREADY WON
70

View Slide

@MacMladen
]{
ANGULAR 6
71

View Slide

@MacMladen
]{
ANGULAR 6 VS REACT 16
72

View Slide

@MacMladen
]{
ANGULAR VS REACT
73

View Slide

@MacMladen
]{
ANGULAR VS REACT
74

View Slide

@MacMladen
]{
ANGULAR VS REACT
75

View Slide

@MacMladen
]{
ANGULAR VS REACT VS VUE
76

View Slide

@MacMladen
]{
FROM ANGULAR TO REACT
77

View Slide

@MacMladen
]{
NATIVESCRIPT VS REACT NATIVE
78

View Slide

@MacMladen
]{
HOW JAVASCRIPT WORKS; 13 ARTICLES IN DEPTH
79

View Slide

]{
JavaScript COURSES
80

View Slide

@MacMladen
]{
EDX JAVASCRIPT COURSES (FREE)
81

View Slide

@MacMladen
]{
30 JAVASCRIPT CHALLENGES (FREE)
82

View Slide

@MacMladen
]{
PRACTICAL JAVASCRIPT (FREE)
83

View Slide

@MacMladen
]{
FREE CODE CAMP (FREE)
84

View Slide

@MacMladen
]{
WES BOS COURSES (PREMIUM AND FREE)
85

View Slide

]{
JavaScript BOOKS
86

View Slide

@MacMladen
]{
12 JAVASCRIPT BOOKS
87

View Slide

@MacMladen
]{
ELOQUENT JAVASCRIPT (FREE)
88

View Slide

@MacMladen
]{
YOU DON’T KNOW JAVASCRIPT (FREE)
89

View Slide

@MacMladen
]{
DUCKETT: JAVASCRIPT & JQUERY
90

View Slide

@MacMladen
]{
JAVASCRIPT SVEOBUHVATNI VODIČ
91

View Slide

@MacMladen
]{
JAVASCRIPT KORAK PO KORAK
92

View Slide

@MacMladen
]{
Professional
Development
School
93
BROUGHT TO YOU BY ]{ODER 
PROFESSIONAL DEVELOPMENT SCHOOL

View Slide

]{
THANKS!
94
Mladen Đurić
@MacMladen

View Slide

]{
95
Q & A
Mladen Đurić
[email protected]

View Slide

@MacMladen
]{

View Slide

VTS185: JavaScript 2018, State and Trends

VTS185: JavaScript 2018, State and Trends

Mladen Đurić

More Decks by Mladen Đurić

Other Decks in Programming

Featured

Transcript