{"id":15664784,"url":"https://github.com/balupton/javascript-can-do-what","last_synced_at":"2025-05-06T19:29:24.241Z","repository":{"id":137790078,"uuid":"50941759","full_name":"balupton/javascript-can-do-what","owner":"balupton","description":"Talk: JavaScript can do WHAT?!","archived":false,"fork":false,"pushed_at":"2017-08-07T00:17:01.000Z","size":12,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T02:11:51.030Z","etag":null,"topics":["meta","talk"],"latest_commit_sha":null,"homepage":"http://www.meetup.com/Port80-Perth/events/227567006/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/balupton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-02T18:24:21.000Z","updated_at":"2020-06-20T09:09:41.000Z","dependencies_parsed_at":"2023-05-22T14:00:24.112Z","dependency_job_id":null,"html_url":"https://github.com/balupton/javascript-can-do-what","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balupton%2Fjavascript-can-do-what","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balupton%2Fjavascript-can-do-what/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balupton%2Fjavascript-can-do-what/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balupton%2Fjavascript-can-do-what/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/balupton","download_url":"https://codeload.github.com/balupton/javascript-can-do-what/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252752755,"owners_count":21798846,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["meta","talk"],"created_at":"2024-10-03T13:44:09.317Z","updated_at":"2025-05-06T19:29:24.235Z","avatar_url":"https://github.com/balupton.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript can do WHAT?!\n\nThese are the notes for a talk I give. [Slides are here.](https://slides.com/balupton/what/) It was originally presented at [Port80 Perth - 2016 February Meetup](http://www.meetup.com/Port80-Perth/events/227567006/) which can be [Watched Here](https://youtu.be/ACz5SH8Q43k).\n\nAn overview of the latest capabilities from the JavaScript Web Development scene. includes overviews of the benefits and when to use, for the following:\n\n* A brief history of JavaScript (90s, 00s, Prototype, jQuery, Backbone, TodoMVC, Virtual DOM, Node, Servers, Desktop)\n* The latest ECMAScript standards (ES6+). Discover native classes, promises for easy async, where promises fall short. How to compile ES6+ code today (Babel).\n* Node: Short history of Node.js, it’s usages over time (servers, command line apps, robotics, desktop apps), things to know\n* Build tools and generators: Introduction to Grunt, Gulp, NPM Scripts, and Static Site Generators like DocPad\n* Browser innovations like WebRTC for webcam, microphone, and peer 2 peer communication - think video chat apps and netflix\n* Browser hinderances like the DOM and the introduction of the Virtual DOM (React.js) as well as creating native iOS applications using React’s Virtual DOM using React Native\n\nSuitable for beginners and professionals. Will describe each section, and touch on basic examples. Depth is available on questions.\n\n\n## History\n\n### 1995+ Forms\nJavaScript and the DOM were still very basic, with many browser inconsistencies.\nJavaScript was not the only player, VBScript and JScript were also possible.\nCSS was still emerging and required [evanglisism](http://www.csszengarden.com/).\nJavaScript was used almost exclusively for mere form validation and alerts/prompts.\nThink of your typical email form validation.\n\n[Example.](./01.php)\n\n``` html\n\u003cform action=\"\" method=\"post\" onsubmit=\"return confirm('Are you sure?')\"\u003e\n```\n\n- Problem: \u003cspan class=\"step\"\u003eValidation existed on the client-side and on the server-side (if lucky). This duplicated effort, was often not done, and often resulted in inconsistent validation.\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003eSomehow use client-side to request the server-side logic.\u003c/span\u003e\n\n### 2000+ XHR\nJavaScript became consistent, however features across browsers were still inconsistent.\nIn 1999 and the years following, different browsers provided JavaScript access to server-side communication via the [XHR/XMLHttpRequest/AJAX](https://en.wikipedia.org/wiki/XMLHttpRequest) standard.\nThis was primarily used at the time for consolidating form validation to the server-side, for consistent and secure validation.\nThink of your typical yet simple government form validation.\n\n[Example.](./02.php)\n\n``` javascript\nvar request = new XMLHttpRequest()\nrequest.onreadystatechange = function () {\n    if (this.readyState === 4) {\n        var result = JSON.parse(request.responseText)\n        if ( !result.success ) {\n            throw new Error(result.message || 'Validation of the form failed')\n        }\n    }\n}\n```\n\n- Problem: \u003cspan class=\"step\"\u003eProper server-side validation and communication allowed better apps to be developed, and consequently more complex applications\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003eBrowsers were not yet ready for the requirements of the applications that were being built for them. Libraries came to the rescue.\u003c/span\u003e\n\nIn later years, this technology would be used for polling to emulate Web Socket technology  for server to client notifications and communication.\n\n### 2005+ Libraries\nIn this time, JavaScript was becoming necessary to accomplish more advanced browser functions, such as form validation, page interactions, and animations.\nThink of JavaScript's usage in early WordPress versions.\n\n#### Vanilla\n\n#### Prototype.js\nIn early 2005, [Prototype.js](https://en.wikipedia.org/wiki/Prototype_JavaScript_Framework) came out, accomplishing Object Orientated techniques, notably by [monkey-patching](https://en.wikipedia.org/wiki/Monkey_patch) native classes.\nIn mid 2005, [Scriptaculous.](https://en.wikipedia.org/wiki/Script.aculo.us) came out, accomplishing visual [animations](http://madrobby.github.io/scriptaculous/combination-effects-demo/) and interactions.\n[Example.](https://github.com/balupton/jquery-sparkle/blob/master/scripts/resources/core.string.js).\n\n``` javascript\ndocument.getElementById('myel').style.color = 'red'\ndocument.getElementById('myel').setStyle({color: 'green'})\n$('myel').setStyle({color: 'white'})\n```\n\n- Problem: \u003cspan class=\"step\"\u003eDifferent libraries and code often depending on different variations of a native prototype extension. Browsers couldn't agree either.\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003eMove extensions into their own classes.\u003c/span\u003e\n\n#### MooTools\n\nIn late 2006, [MooTools](https://en.wikipedia.org/wiki/MooTools) came out, accomplishing Object Orientated techniques, notably by new class types.\n\n``` javascript\nvar Animal = new Class({\n    initialize: function(name) {\n        this.name = name;\n    }\n})\nvar Cat = new Class({\n    Extends: Animal,\n    talk: function() {\n        return 'Meow!';\n    }\n})\nvar Dog = new Class({\n    Extends: Animal,\n    talk: function() {\n        return 'Arf! Arf';\n    }\n})\nvar animals = {\n    a: new Cat('Missy'),\n    b: new Cat('Mr. Bojangles'),\n    c: new Dog('Lassie')\n}\nObject.each(animals, function (animal) {\n    alert(animal.name + ': ' + animal.talk())\n})\n```\n\n- Problem: \u003cspan class=\"step\"\u003eCode often became overly verbose, was complicated for beginners, and didn't make use of nice parts of JavaScript.\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003eNo one really new at the time what the solution was for making ugly JavaScript beginner friendly\u003c/span\u003e\n\n#### jQuery\n\nIn late 2006, [jQuery](https://en.wikipedia.org/wiki/JQuery) came out, accomplishing Object Orientated techniques, notably by simplistic chaining and beginner friendly API - OO without thinking about it.\nIn late 2007, [jQuery UI](https://en.wikipedia.org/wiki/JQuery_UI) came out, accomplishing visual animations and interactions via widgets.\n\n``` javascript\n$.prototype.log = function () {\n    var $el = this\n    alert($el.html())\n}\n$('p.surprise').addClass('ohmy').show('slow').log()\n```\n\n- Problem: \u003cspan class=\"step\"\u003eWas great at interacting with the DOM, however didn't give us techniques for building apps.\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003eNo one really new at the time what the solution was for creating manageable and powerful web apps.\u003c/span\u003e\n\n\n#### Simple JavaScript Inheritance\n\nIn early 2008, [John Resig](http://ejohn.org) (author of jQuery) published [Simple JavaScript Inheritance](http://ejohn.org/blog/simple-javascript-inheritance/), a 25 line utility that effectively emulated proper classes in JavaScript.\n\n``` javascript\nvar Person = Class.extend({\n    init: function(isDancing){\n        this.dancing = isDancing\n    },\n    dance: function(){\n        return this.dancing\n    }\n});\n\nvar Ninja = Person.extend({\n    init: function(){\n        this._super(false)\n    },\n    dance: function(){\n        // Call the inherited version of dance()\n        return this._super()\n    },\n    swingSword: function(){\n        return true\n    }\n});\n\nvar p = new Person(true)\np.dance() // =\u003e true\n\nvar n = new Ninja()\nn.dance() // =\u003e false\nn.swingSword() // =\u003e true\n\n// Should all be true\np instanceof Person \u0026\u0026 p instanceof Class \u0026\u0026\nn instanceof Ninja \u0026\u0026 n instanceof Person \u0026\u0026 n instanceof Class\n```\n\n\n### 2005+ Early State Management\nIn this time, JavaScript was also seeing use in early Content Management Systems, requiring page transitions and state management.\nThink of your typical multi-part form submission flow.\n\n#### HashChange\n\nIn 2008, [`window.onhashchange`](https://developer.mozilla.org/en-US/docs/Web/Events/hashchange) came out in some browsers (with others following), accomplishing the first unintended browser-supported way of accomplishing state management inside web browsers:\n[Example.](http://balupton.github.io/jquery-history/demo/)\n\n``` javascript\nwindow.location.onhashchange = function () {\n    alert('hash:', window.location.hash)\n}\nwindow.location.hash = 'one'  // alerts \"hash: one\"\nwindow.location.hash = 'two'  // alerts \"hash: two\"\nhistory.back()  // alerts \"hash: one\"\n```\n\n- Problem: \u003cspan class=\"step\"\u003eWebsite would need to be loaded twice — once for the initial landing state, then again for the actual hash state. SEO required client-side and server-side architecture decisions.\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003eMore [advanced libraries](http://balupton.github.io/jquery-ajaxy/demo/) were developed, while waiting for browsers to provide a proper API for managing state.\u003c/span\u003e\n\n#### History API\n\nIn 2011, [`window.onpopstate`](https://developer.mozilla.org/en-US/docs/Web/Events/popstate) came out in some browsers (with others following), accomplishing the first intended browser-supported way of accomplishing state management inside web browsers:\n\n``` javascript\nwindow.location.onpopstate = function () {\n    alert('location: ' + document.location.href + ', and the state has changed to: ' + JSON.stringify(event.state))\n}\nhistory.pushState({page: 1}, \"title 1\", \"?page=1\");\nhistory.pushState({page: 2}, \"title 2\", \"?page=2\");\nhistory.replaceState({page: 3}, \"title 3\", \"?page=3\");\nhistory.back(); // alerts \"location: http://example.com/example.html?page=1, state: {\"page\":1}\"\nhistory.back(); // alerts \"location: http://example.com/example.html, state: null\nhistory.go(2);  // alerts \"location: http://example.com/example.html?page=3, state: {\"page\":3}\n```\n\n- Problem: \u003cspan class=\"step\"\u003eNot all browsers supported this at all or consistently.\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003e[Education](https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling) and [polyfills](https://github.com/browserstate/history.js/) were developed by the community.\u003c/span\u003e\n\n\n### 2008+ Single Page Web Applications\nIn this time, JavaScript was seeing good cross-browser consistency (for the most part), advanced server-side backends, and the emergency of Client-Side Web Applications.\nThink of your typical Facebook commenting workflow.\n\nIn 2008, [client-side templating engines](http://balupton.github.io/jquery-smarty/demo/) started to come out, accomplishing server-side style templating on the client-side.\nThere would later go on to become very popular.\n\n``` html\n\u003cdiv class=\"smarty\"\u003e\n    {$myvar|default:\"hi\"|capitalize}\n    {assign var=\"myvar\" value=\"hello\"}\n    {$myvar|default:\"hi\"|capitalize}\n\u003c/div\u003e\n\u003cscript\u003e$('.smarty').populate()\u003c/script\u003e\n```\n\n- Problem: \u003cspan class=\"step\"\u003eThey just tackled the view layer of web applications, rather than the model or controller layers. So other view layer technologies like jQuery remained.\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003eLibraries would need to come out that tackled the model and controller layers.\u003c/span\u003e\n\nIn late 2010, [Backbone](https://en.wikipedia.org/wiki/Backbone.js) came out, accomplishing organised Client-Side Web Applications, notably by the MVC pattern.\n\n``` javascript\nvar MessageList = Backbone.View.extend({\n    initialize: function() {\n        var messages = this.collection\n        messages.on(\"reset\", this.render, this)\n        messages.on(\"add\", this.addMessage, this)\n        messages.on(\"remove\", this.removeMessage, this)\n        messsages.each(this.addMessage, this)\n    }\n})\n// Later, in the app...\nInbox.messages.add(newMessage);\n```\n\n- Problem: \u003cspan class=\"step\"\u003eWhile the model and controller layers were fantastic, the view layer was too primitive.\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003eView layer was partnered with templating libraries and engines, however things like nested views in lists remained difficult to manage.\u003c/span\u003e\n\n### TodoMVC\n\nIn 2012, other client-side application libraries reached maturity, such as [Angular](https://en.wikipedia.org/wiki/AngularJS) and [Ember](https://en.wikipedia.org/wiki/Ember.js), and the [TodoMVC](https://github.com/tastejs/todomvc) project was created.\n\n- Problem: \u003cspan class=\"step\"\u003eClient-side applications were starting to get overly complicated, slow, and difficult to manage.\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003ePackage managers and tooling were required. Simpler methodologies were also required.\u003c/span\u003e\n\n\n#### ReactJS\n\n``` javascript\nvar TodoList = React.createClass({\n    render: function () {\n        var createItem = function (item) {\n            return \u003cli key={item.id}\u003e{item.text}\u003c/li\u003e\n        }\n        return \u003cul\u003e{this.props.items.map(createItem)}\u003c/ul\u003e\n    }\n})\nvar TodoApp = React.createClass({\n    getInitialState: function () {\n        return {items: [], text: ''}\n    },\n    onChange: function (e) {\n        this.setState({text: e.target.value})\n    },\n    handleSubmit: function (e) {\n        e.preventDefault()\n        var nextItems = this.state.items.concat([{\n            text: this.state.text, id: Date.now()\n        }])\n        var nextText = ''\n        this.setState({items: nextItems, text: nextText})\n    },\n    render: function () {\n        return (\n            \u003cdiv\u003e\n                \u003ch3\u003eTODO\u003c/h3\u003e\n                \u003cTodoList items={this.state.items} /\u003e\n                \u003cform onSubmit={this.handleSubmit}\u003e\n                    \u003cinput onChange={this.onChange} value={this.state.text} /\u003e\n                    \u003cbutton\u003e{'Add #' + (this.state.items.length + 1)}\u003c/button\u003e\n                \u003c/form\u003e\n            \u003c/div\u003e\n        )\n    }\n})\nReactDOM.render(\u003cTodoApp /\u003e, mountNode)\n```\n\n### 2010+ Node Explosion\n\n#### Node.js\n\nIn 2010, [Node.js](https://en.wikipedia.org/wiki/Node.js) began public adoption, accomplishing server-side and desktop style applications with JavaScript, notably with C style capabilities.\nThis unleashed JavaScript from the web browser and allowing code for the first notable time to be shared between the client and server.\n\n``` javascript\nvar http = require('http'), hostname = '127.0.0.1', port = 1337\nhttp.createServer(function (req, res) {\n    res.writeHead(200, { 'Content-Type': 'text/plain' })\n    res.end('Hello World\\n')\n}).listen(port, hostname, function () {\n    console.log('Server running at http://' + hostname + ':' + port + '/');\n});\n```\n\n- Problem: \u003cspan class=\"step\"\u003eIt was early days and the eco-system and capabilities had to be created from scratch.\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003eMore than 200,000 packages now exist for the node.js eco-system.\u003c/span\u003e\n\n#### NPM\n\nIn 2012, [npm](https://en.wikipedia.org/wiki/Npm_(software)) began public adoption with its bundling with [node 0.6.13](https://github.com/nodejs/node/blob/master/CHANGELOG.md#20120315-version-0613-stable), accomplishing standardised JavaScript sharing for the first time.\n\n``` bash\nmkdir multiply\nnpm init\necho \"module.exports = function (a, b) { return a*b }\" \u003e index.js\nnpm publish\n```\n\n``` bash\nmkdir multiplier\nnpm init\nnpm install --save multiply\necho \"console.log(require('multiply')(5, 10))\" \u003e index.js\nnode index.js\n```\n\n- Problem: \u003cspan class=\"step\"\u003eNo path forward was yet defined for sharing isomorphic javascript code and libraries. Many techniques were developed for this (e.g. AMD, Require.js)\u003c/span\u003e\n- Solution: \u003cspan class=\"step\"\u003eA lot of tooling and eventual standardisation was required.\u003c/span\u003e\n\n#### CLI Apps\n\n#### Tooling\nBrowserify, Gulp, Grunt, Mocha, PhantomJS, DocPad, Yeoman, Babel, ChainyJS, npm scripts.\n\n\n### 2013+ Modern Web\n\n#### Content Editable\n#### Web Sockets\n#### Web RTC\n#### ESNext\n\n\n### 2013+ Modern Apps\n\n#### Meteor\n\n#### Robotics\nhttp://johnny-five.io\nhttp://www.nodecopter.com\n\n#### Desktop\nhttp://electron.atom.io\n\n#### Virtual DOM\nhttps://gitlab.com/balupton/virtual-dom-explained\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalupton%2Fjavascript-can-do-what","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbalupton%2Fjavascript-can-do-what","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalupton%2Fjavascript-can-do-what/lists"}