- Silicon Valley Mantra - Software is Eating the World¹
- Trivia Quiz - Q: What's the World's Most Popular Programming Language?
- JavaScript is Eating the World!?
- Atwood's JavaScript Law
- Always Bet on JavaScript
- The New New / The Next JavaScript - Rest in Peace (R.I.P.)
- And the Winner is...
- CSS Trivia Quiz - Vertical Align / Center - Mission Impossible?
- One Language to Rule Them All?! - Bits & Bytes Rule
- Teach Yourself Web Programming in 2019 - Roadmap
- Top Starred (JavaScript) Projects on GitHub¹ in 2019
- And Many More Top (JavaScript) Projects
- Trivia Quiz: Q: What's Common to All Top JavaScript Projects?
- Aside - History Nostalgia Corner - What Happened with jQuery?
- JavaScript in Action - What's Your Code (Text) Editor?
- JavaScript in 2016 - A Look Back
- What's News? Q: How many new language feature can you find?
- Can I Use ___ ? - Browser ES6 (ES2015) Support Matrix in 2016
- JavaScript (Today) in 2019
- Can I Use ___ ? - Browser ES6 (ES2015) Support Matrix (Today) in 2019
- What's New in JavaScript 2016, 2017, 2018, 2019, 2020?
- Aside - Trivia Quiz - Java Release Schedule (Today) in 2019
- What's New In ES2019?
- What's New In ES2018?
- What's New In ES2016? ES2017?
- What's New In ES2020? Official Upcoming JavaScript Language Extension Proposals
- React in 2016 - (Un)popular Opinions
- React in 2017 - A Look Back
- React vs Vue vs Svelte in 2019
- Hello, World!
- What's Svelte?
- Trivia Quiz - React & Reactivity
- Occam's Razor - Less Code is More
- Counter
- A+B=? Form
- What's Next? JavaScript in 2016
- JavaScript w/ Types
- More Fun - Fun(ctional) Languages
- Why Fun(ctional)?
- Counter Example with Elm
- Counter Example with ReasonML (and React) and Timer (Side) Effect
- Many More Languages Compiling to JavaScript
- What's Next? JavaScript (Today) in 2019
- JavaScript + WebAssembly
- What's WebAssembly?
- Official WebAssembly Frequently Asked Questions (and Answers)
- Bonus - Counter Example in "Low-Level" System Language Compiled to "Low-Level" WebAssembly
- JavaScript + WebAssembly
Q: Who's going to write all that code?
Q: And in what programming language(s)?
¹: Why Software Is Eating the World by Marc Andreessen, 2011
- [ A ] JavaScript
- [ B ] Python
- [ C ] C
- [ D ] Java
- [ ? ] Other, Please Tell
Any application that can be written in JavaScript, will eventually be written in JavaScript.
-- Jeff Atwood, Co-Founder of Stackoverflow, 2007
All applications will ultimately wind up on the web and therefore must be written in JavaScript (or WebAssembly).
I usually finish with a joke: Always bet on JavaScript.
-- Brendan Eich, Inventor of JavaScript
The New New / The Next JavaScript - Rest in Peace (R.I.P.):
(Sun/Oracle) JavaFX¹ vs (Adobe) Flash/ActionScript vs (Microsoft) Silverlight/.NET vs HTML/JavaScript
¹: FX = Special (Visual Graphics) Effects
Java Applets, Java Web Start, ActiveX, VBScript (Visual Basic Script), Adobe AIR (Adobe Integrated Runtime), Google Gears, Google Web Toolkit (GWT), Google Native Client (NaCl), and on and on and on. FAIL. FAIL. FAIL.
JavaScript for "higher-level" web (application) programming
WebAssembly (formerly asm.js) for "lower-level" web ("byte code") programming
Python for data science, machine learning and "casual" programming
Ruby for secure (crypto blockchain) contract transaction script and data / text wrangling programming
C for systems programming
SQL for (relational) database queries programming
CSS for styling and layout programming
and so on.
Q: How to vertical align / center the content in a box?
- [ A ] Use a block turned into a (bitmap pixel-perfect) image
- [ B ] Use JavaScript
- [ C ] Use the "new" flexbox layout
- [ ? ] Other, Please Tell
It's just 0 and 1s. Bits & Bytes. Mix & Match.
JavaScript Trend: Assembly and Compiler (incl. Source-to-Source Compiler) "Renaissance" in 2019 Continues => Ever More Choices - JavaScript Fatigue?!
-- 19 Nov 2018
Learn Web Programming in 2019 - Roadmap
(Source: Roadmap to becoming a web developer in 2019 by Kamran Ahmed)
-
vuejs/vue ★136 920 - Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web
-
twbs/bootstrap ★132 863 - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
-
facebook/react ★127 905 - A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
d3/d3 ★84 257 - Bring data to life with SVG, Canvas and HTML
-
facebook/react-native ★76 458 - A framework for building native apps with React
-
Microsoft/vscode ★74 379 - Visual Studio Code
-
electron/electron ★72 606 - Build cross-platform desktop apps with JavaScript, HTML, and CSS
-
facebook/create-react-app ★66 872 - Set up a modern web app by running one command
-
flutter/flutter ★61 469 - Flutter makes it easy and fast to build beautiful mobile apps
-
nodejs/node ★60 626 - Node.js JavaScript runtime
-
FortAwesome/Font-Awesome ★59 630 - The iconic SVG, font, and CSS toolkit
-
angular/angular.js (v1) ★59 505 - AngularJS - HTML enhanced for web apps
-
daneden/animate.css ★59 097 - A cross-browser library of CSS animations. As easy to use as an easy thing.
(Source: GitHub Search - stars: > 50000)
¹: excludes learning / course projects (freeCodeCamp/freeCodeCamp ★302 097, EbookFoundation/free-programming-books ★121 973, sindresorhus/awesome ★107 345, getify/You-Dont-Know-JS ★100 808, airbnb/javascript ★84 470, kamranahmedse/developer-roadmap ★80 121) or political campaigns (996icu/996.ICU ★238 634) or machine learning (tensorflow/tensorflow ★126 387) and others
axios/axios ★58 572 - Promise based HTTP client for the browser and node.js
jquery/jquery ★51 443 - jQuery JavaScript Library
mrdoob/three.js ★50 954 - JavaScript 3D library
atom/atom ★48 539 - The hackable text editor
webpack/webpack ★48 505 - A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading...
GoogleChrome/puppeteer ★48 477 - Headless Chrome Node API
reduxjs/redux ★48 290 - Predictable state container for JavaScript apps
Microsoft/TypeScript ★48 171 - TypeScript is a superset of JavaScript that compiles to clean JavaScript output
angular/angular (v2) ★47 508 - One framework. Mobile & desktop
mui-org/material-ui ★46 341 - React components for faster and easier web development. Build your own design system, or start with Material Design
socketio/socket.io ★46 116 - Realtime application framework (Node.JS server)
and many many more
- [ A ] Free as in Free Lunch / Beer
- [ B ] Free as in Free Speech
- [ C ] Pricing Starts at $40 per Head
- [ ? ] Other, Please Tell
-- 22 Feb 2017
-- 12 Mar 2016
jquery/jquery ★51 443 - jQuery JavaScript Library
jQuery in 2019?
"Use the platform" always win (because native is faster)
(DOM) Queries with CSS selectors now built into all (modern) browsers
$('.my #awesome selector');vs
document.querySelectorAll('.my #awesome selector');More fluid / beautiful / convenient functions. Example - Loops:
$.each(array, function(i, item){
});vs
array.forEach(function(item, i){
});See You might not need jQuery, (Now More Than Ever) You Might Not Need jQuery,
and others.
Evergreen
- [ A ] Vim
- [ B ] Emacs
New Kids
- [ C ] Visual Studio Code¹ by Microsoft
- [ D ] Atom by GitHub (now part of Microsoft)
¹: Note: Microsoft Visual Studio is different from Microsoft Visual Studio Code
See the Talk Notes - The New New JavaScript / ECMAScript (ES6, ES7, ES8) »
Q: How many new language feature can you find?
components/PostList.js:
import React from 'react'
import { Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'
export default class PostList extends React.Component {
render () {
const {posts} = this.props;
return (
<ul>
{posts.map( post => <li><Link to={prefixLink(post.path)}>{post.data.title}</Link></li> )}
</ul>
)
}
}Q: How many new language feature can you find?
A:
- Classes
- Modules
- Arrow Functions
- Destructuring (e.g. Assignment "Shortcuts" with Pattern Matching)
- Let + Const
And much more
- Enhanced Object Literals
- Template Strings
- Unicode
- Default + Rest + Spread
- Iterators + For..Of
- Map + Set + WeakMap + WeakSet
- Symbols (e.g. New Data Type)
- Subclassable Built-ins (e.g. Array, Date, Element, etc.)
- Math + Number + String + Object APIs
- Binary and Octal Literals
- Generators
- Promises
- Proxies
- Reflect API
- And much more
- Microsoft Internet Explorer (IE) 11 - 15%
- Microsoft Edge 14 - 90%
- Mozilla Firefox 49 - 93%
- Google Chrome 52 - 98%
- Apple Safari 10 - Surprise (!) - 100%
(Source: ES6 Compatibility Table, Jul/2016)
- Microsoft Internet Explorer (IE) 11 - 11%
- Microsoft Edge 18 - 96%
- Mozilla Firefox 66 - 98%
- Google Chrome 73 - 98%
- Apple Safari 12.1 - Surprise (!) - 99%
(Source: ES6 Compatibility Table, April/2019)
What's the missing 2%?
Really, just the optimisation feature called "proper tail calls (tail call optimisation)".
JavaScript (JS), ECMAScript (ES), ES5, ES6 / ES2015, ES2016, ES2017, ES2018, ES2019, ES2020
First appeared on May 23, 1995 -- 23 years ago
- ES 5 - Release on December 2009
- ES 6 / ES2015 - Release on June 2015 - Almost 6 Years(!)
- ES2016 - Release on June 2016
- ES2017 - Release on June 2017
- ES2018 - Release on June 2018 (Current Version today in 2019)
- ES2019 - Release on ??
- ES2020 - Release on ??
- and so on
Note: New Release Schedule Starting with ES2016 - Every Year A Release
Q: What the latest Java release (as of April/2019)?
- [ A ] Java 41
- [ B ] Java 12
- [ C ] Java 9
- [ ? ] Other, Please Tell
Q: What's the Java release Schedule in 2019?
- [ A ] One Release Every Two Years
- [ B ] One Release Every Year
- [ C ] Two Releases Every Year (Every Six Month)
- [ ? ] Other, Please Tell
Array.prototype.{flat,flatMap}Object.fromEntries()String.prototype.{trimStart,trimEnd}Symbol.prototype.description- Optional catch binding
- Stable
Array.prototype.sort() - Well-formed
JSON.stringify - JSON superset
Function.prototype.toStringrevision
(Source: Exploring ES2018 and ES2019 by Axel Rauschmayer)
- Asynchronous iteration
- Rest/Spread Properties
- RegExp named capture groups
- RegExp Unicode property escapes
- RegExp lookbehind assertions
s(dotAll) flag for regular expressionsPromise.prototype.finally()- Template Literal Revision
(Source: Exploring ES2018 and ES2019 by Axel Rauschmayer)
2017
- Async functions
- Shared memory and atomics
Object.entries()andObject.values()- New string methods:
padStartandpadEnd Object.getOwnPropertyDescriptors()- Trailing commas in function parameter lists and calls
2016
Array.prototype.includes- Exponentiation operator (
**)
(Source: Exploring ES2016 and ES2017 by Axel Rauschmayer)
See TC39¹ - State of Proposals or TC39¹ - Tracking ECMAScript Proposals »
¹: Technical Committee 39 @ ECMA (European Computer Manufacturers Association)
globalThisimport()- Legacy RegExp features in JavaScript
BigIntimport.meta- Private instance methods and accessors
- Class Public Instance Fields & Private Instance Fields
- Static class fields and private static methods
- Numeric Separators
Promise.allSettled- and some more
-- 19 Dec 2016
See the Talk Notes -
Building Web Components with React.js - Past, Present, Future »
React
All .jsx:
function Message( {name} ) {
return <h1>{ `Hello, ${name}!` }</h1>;
}
<Message name="World" />Note: JSX (JavaScript XML) adds XML syntax to JavaScript and gets compiled (or really preprocessed):
function Message( {name} ) {
return React.createElement( "h1", null, `Hello, ${name}!`);
}
React.createElement( Message, { name: "World" });Vue
.html:
<div id="message">
Hello, {{ name }}!
</div>.js:
var msg = new Vue({
el: '#message',
data: {
name: 'World'
}
})or use "single-file" component-style:
.vue:
<template>
<div id="message">
Hello, {{ name }}!
</div>
</template>
<script>
export default {
name: 'World'
}
</script>
Svelte
.html:
<script>
let name = 'World';
</script>
<h1>Hello {name}!</h1>
Cybernetically enhanced web apps!?
Write Less Code Build boilerplate-free components using languages you already know - HTML, CSS and JavaScript
No Virtual DOM Svelte compiles your code to tiny, framework-less vanilla JavaScript - your app starts fast and stays fast
True reactive No more complex state management libraries - Svelete brings reactivity to JavaScript itself
See svelte.dev »
Q: Why is React's Page Update NOT Reactive?
Hint: Schedule vs React, Virtual DOM Diff & Buffer Batches (Reconciles) DOM Updates (60 Frames/Second), No (Model) "Binding" with Publish & Subscribe
Occam's razor (also Ockham's razor) is the problem-solving principle that essentially states that "simpler solutions are more likely to be correct than complex ones." When presented with competing hypotheses to solve a problem, one should select the solution with the fewest assumptions. The idea is attributed to English Franciscan friar William of Ockham (c. 1287–1347), a scholastic philosopher and theologian.
Question: How to decide what language (or "patterns") to use if you have hundreds of choices?
Less code is more. Less abstractions (and to the "metal"¹) is more.
¹: "Use the platform" always wins (because native is faster).
-- 9 Nov 2017
React
.jsx - "classical" (pre-hooks):
class Counter extends React.Component {
state = { count: 0 };
handleClick = () => {
this.setState(({ count }) => ({ count: count + 1 }));
};
render() {
return
<button onClick={this.handleClick}>
{this.state.count}
</button>;
}
}
<Counter />New: React "class-less" with hooks
.jsx:
function Counter() {
const [count, setCount] = useState(0);
return
<button onClick={() => setCount(count + 1)}>
{count}
</button>;
}What are Hooks? Hooks are a new addition in React 16.8. Hooks let you use state and other React goodies without writing a class. (Source: Introducing Hooks @ React)
Vue
.vue:
<template>
<button @click="handleClick">{{count}}</button>
</template>
<script>
export default {
data() { return { count: 0 } },
methods: {
handleClick() { this.count += 1 }
}
}
</script>
Svelte
.html:
<script>
let count = 0;
function handleClick() { count += 1; }
</script>
<button on:click={handleClick}>
Clicked {count}
</button>
Svelte
.html:
<script>
let a = 1;
let b = 2;
</script>
<input type="number" bind:value={a}>
<input type="number" bind:value={b}>
<p>{a} + {b} = {a + b}</p>
React
.jsx - "class-less" with hooks:
export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
function handleChangeA(event) { setA(+event.target.value); }
function handleChangeB(event) { setB(+event.target.value); }
return
<>
<input type="number" value={a} onChange={handleChangeA}/>
<input type="number" value={b} onChange={handleChangeB}/>
<p>{a} + {b} = {a + b}</p>
</>;
};Vue
.vue:
<template>
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
<p>{{a}} + {{b}} = {{a + b}}</p>
</template>
<script>
export default {
data: function() {
return {
a: 1,
b: 2
};
}
};
</script>
Conclusion:
The example takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger!
(Source: Svelte - Write less code: The most important metric you're not paying attention to)
Biggies
- TypeScript ★48127 (20098¹) (by Microsoft) - JavaScript Extended w/ Types
- Flow ★19356 (10693¹) (by Facebook) - Add Annotations for Type Checking
- Dart ★3521 (1038¹) (by Google) - New Language w/ (Optional) Types
And Others.
¹: Stars in July 2016
Biggies
- Elm ★ 5161 (3706)¹ (by Evan Czaplicki 'n' friends) - Small (Pure) Functional Language for the Web
- Based on Haskell (Simplified)
- ReasonML ★7610 (2467)¹ (by Facebook) - Larger (Pragmatic) Functional Language
- Based on OCaml (New ReasonML Syntax Closer to JavaScript)
And Others.
¹: Stars in July 2016
Why Fun(ctional)?
- "Stronger" Types
- No Null and No Undefined Possible
- e.g. Elm Uses Maybe types with Just a and Nothing and Tuple Units e.g.
())
- e.g. Elm Uses Maybe types with Just a and Nothing and Tuple Units e.g.
- Lists must always be of the same type
- If expressions must always return the same type (in if and else branch)
- Case expressions must always cover all possible branches / values
- And so on
- No Null and No Undefined Possible
- Immutability
- Cannot change/overwrite variables (change will always create a new variable)
- Great for "high-speed" diffing web component/element trees ("just" compare node references)
- Great for "time travel" debugging e.g. save or restore any state in time
Counter Example with Elm
Homework. Practice (or Learn) Functional Programming with Elm :-)
Counter Example with ReasonML (and React)
Homework. Practice (or Learn) Functional Programming with ReasonML :-)
type Msg = Click
model : Int
model = 0
view : Int -> Html.Html Msg
view model =
button [ onClick Click ] [ text (toString model) ]
update : Msg -> Int -> Int
update msg model =
case msg of
Click -> model + 1Read more in An Introduction to Elm incl. the Elm Architecture and much more by Evan Czaplicki
type action =
| Tick;
type state = {
count: int,
};
[@react.component]
let make = () => {
let (state, dispatch) = React.useReducer(
(state, action) =>
switch (action) {
| Tick => {count: state.count + 1}
},
{count: 0}
);
React.useEffect0(() => {
let timerId = Js.Global.setInterval(() => dispatch(Tick), 1000);
Some(() => Js.Global.clearInterval(timerId))
});
<div>{ReasonReact.string(string_of_int(state.count))}</div>;
};
Read more in Exploring ReasonML and functional programming by Axel Rauschmayer
Java:
- Scala.js - A safer way to build robust front-end web applications!
- Kotlin.js - Kotlin for JavaScript
- ClojureScript - Clojure to JavaScript compiler
- and many more
CoffeScript, Opal (Ruby), Brython (Python), and many many more.
See List of languages that compile to JavaScript »
- "Higher-Level" Language - JavaScript
- "Lower-Level" Language - WebAssembly (formerly asm.js)
Compile C, C++, Rust, and more "system" languages to "Lower-Level" JavaScript. Use compiled code as WebAssembly modules / libraries (almost runs with "native" speed) in JavaScript.
Q: Is WebAssembly trying to replace JavaScript?
A: No! WebAssembly is designed to be a complement to, not replacement of, JavaScript. While WebAssembly will, over time, allow many languages to be compiled to the Web, JavaScript has an incredible amount of momentum and will remain the single, privileged (as described above) dynamic language of the Web. Furthermore, it is expected that JavaScript and WebAssembly will be used together in a number of configurations:
Whole, compiled C++ apps that leverage JavaScript to glue things together.
HTML/CSS/JavaScript UI around a main WebAssembly-controlled center canvas, allowing developers to leverage the power of web frameworks to build accessible, web-native-feeling experiences.
Mostly HTML/CSS/JavaScript app with a few high-performance WebAssembly modules (e.g., graphing, simulation, image/sound/video processing, visualization, animation, compression, etc., examples which we can already see in asm.js today) allowing developers to reuse popular WebAssembly libraries just like JavaScript libraries today.
When WebAssembly gains the ability to access garbage-collected objects, those objects will be shared with JavaScript, and not live in a walled-off world of their own.
pub enum Msg {
Click,
}
pub struct App {
click_count: u32,
}
impl App {
pub fn new() -> Self {
App { click_count: 0 }
}
}
impl Component<Msg> for App {
fn view(&self) -> Node<Msg> {
div(
[class("some-class"), id("some-id"), attr("data-id", 1)],
[
input(
[
class("client"),
r#type("button"),
value("Click me!"),
onclick(|_| { Msg::Click }),
],
[],
),
text(format!("Clicked: {}", self.click_count)),
],
)
}
fn update(&mut self, msg: Msg) {
match msg {
Msg::Click => self.click_count += 1,
}
}
}