Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VTS185: JavaScript 2018, State and Trends

VTS185: JavaScript 2018, State and Trends

This is the fifth lecture in cooperation with High Technical School in Novi Sad (Visoka tehnička škola strukovnih studija) held on May 10, 2018.

Meetup event: https://www.meetup.com/koderrs/events/250538017/

YouTube video: (soon to be published)

JavaScript is the language everybody thinks they know while rarely anyone truly does. Its' frameworks names today are key terms for any serious developer or article (Angular, React, Vue, to name a few). With JavaScript you can equally work on scientific research and produce web, mobile and desktop applications. You can use it as a tool for development (you actually cannot afford not to do so). You can write command line tools. You can use (nearly) same code and write hybrid applications that run on multiple systems by choosing just different target (iOS, Android, Windows, macOS or Linux).

Language was created in ten days of May in 1995. Its' name reminds of Java and yet has (almost) nothing to do with it. It uses concurrently multiple programming paradigms such as imperative, declarative and functional.

Mladen Đurić

May 10, 2018
Tweet

More Decks by Mladen Đurić

Other Decks in Programming

Transcript

  1. @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.
  2. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 2

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

    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 first computer club and gave first BASIC course. It was around 1982. In 2016 I have started a Professional Web Development School ]{oder.
  4. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 6

    ]{oder for VTŠ students: JavaScript
 Learning by doing
 special student discount Jun 18th — Jul 13th 4 weeks, everyday
  5. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 7

    ]{oder for enthusiasts: JavaScript
 Learning by doing
 special enthusiast discount May 21th — Jun 15th 4 weeks, everyday
  6. @MacMladen JavaScript 2018: State and Trends v.1 2018-05-10 ]{ 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.
  7. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 INTRODUCE

    YOURSELF! 10 • Used JavaScript in browser, frontend, backend? • Your field? (web designer, frontend developer) • Coding experience? (none, some, pro)
  8. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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
  9. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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.
  10. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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.
  11. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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.
  12. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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.
  13. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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
  14. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 VANILLA

    JAVASCRIPT 21 JavaScript not extended by any frameworks or additional libraries. Scripts written in Vanilla JS are plain JavaScript code.
  15. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 UNIVERSAL

    SUPPORT 23 All modern Web browsers support JavaScript with built-in interpreters.
  16. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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.
  17. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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.
  18. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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
  19. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 FUNCTIONAL

    27 A function is first-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 defined 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.
  20. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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 defines 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., find 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.
  21. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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 <script> 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
  22. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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
  23. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 KEYWORDS

    FUTURE RESERVED KEYWORDS 31 The following are reserved as future keywords by the ECMAScript specification. They have no special functionality at present, but they might at some future time, so they cannot be used as identifiers. 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
  24. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 KEYWORDS

    FUTURE RESERVED KEYWORDS IN OLDER STANDARDS 32 The following are reserved as future keywords by older ECMAScript specifications (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 identifiers in ECMAScript. • null • true • false
  25. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 WEB

    ASSEMBLY 33 All 4 browsers now support Web Assembly.
  26. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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 flavors.
  27. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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.
  28. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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.
  29. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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, filtering, splitting, and building • Object - accessing, extending, merging, defaults, and transforming • Seq - chaining, wrapping, filtering, and testing.
  30. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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.
  31. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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.
  32. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 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.
  33. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 HOW

    JAVASCRIPT WORKS; 13 ARTICLES IN DEPTH 79
  34. @MacMladen ]{ JavaScript 2018: State and Trends v.1 2018-05-10 Professional

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