JavaScript History and Workflows

A bit of JavaScript history and it's latest workflows.

Transcript

1. JavaScript History and Workflows
2. Intro 5+ Years exp Co-founder RedBuffer Partner Development Creanyx Organizer SpaceApps Islamabad
3. Early Days Spawned in 1995, Added support for Java applets more accessible to non-Java programmers Aka Mocha and LiveScript but was named JavaScript because of the popularity of Java Had low barrier to entry Went under European Computer Manufacturers Association in late 1996 JavaScript was under the commercial pressure because of the wars between Microsoft, Netscape and others. In the fall of 1996, Eich rewrite Mocha as the codebase that became known as SpiderMonkey
5. JSON 2002 Real-time server browser communication were heavily based on Flash or Java applets State exchange was needed for JavaScript JavaScript Object Notation { "glossary": { "title": "example glossary", "GlossDiv": { "title": "S", "GlossList": { "GlossEntry": { "ID": "SGML", "SortAs": "SGML", "GlossTerm": "Standard Generalized Markup Language", "Acronym": "SGML", "Abbrev": "ISO 8879:1986", "GlossDef": { "para": "A meta-markup language, used to create markup languages such as DocBook.", "GlossSeeAlso": ["GML", "XML"] }, "GlossSee": "markup" } } } } }
6. Ajax
7. Libraries jQuery MooTools Prototype YUI Library EXT JS
9. JavaScript/ECMAScript Engines SpiderMonkey Firefox Chakra (JScript9) IE V8 Chrome Rhino Mozilla Nashorn Oracle
10. 2008 / V8 / Chrome / Node Ryan Dahl Trying to speed up web server Exploited Evented nature of JS Same language on Server and Client High concurrency
13. HTML5 Audio WebSockets Storage Fat Clients aka SPA
14. Invasion of Frontend Frameworks Backbone Ember Angular Knockout http://www.smashingmagazine.com/2012/07/journey-through-the-javascript-mvc- jungle/
15. Javascript Modules ES5 does not have any way to define modules AMD (Asynchronous Module Definition) 1. define('myModule', 2. ['foo', 'bar'], 3. // module definition function 4. // dependencies (foo and bar) are mapped to function parameters 5. function ( foo, bar ) { 6. // return a value that defines the module export 7. // (i.e the functionality we want to expose for consumption) 8. 9. // create your module here 10. var myModule = { 11. doStuff:function(){ 12. console.log('Yay! Stuff'); 13. } 14. } 15. 16. return myModule; 17. }); 1. // Consider 'foo' and 'bar' are two external modules 2. // In this example, the 'exports' from the two modules loaded are passed as 3. // function arguments to the callback (foo and bar) 4. // so that they can similarly be accessed 5. 6. require(['foo', 'bar'], function ( foo, bar ) { 7. // rest of your code here 8. foo.doSomething(); 9. });
16. Workflows Node started to be used as build tool var _fs = require('fs'); function concat(opts) { var fileList = opts.src; var distPath = opts.dest; var out = fileList.map(function(filePath){ return _fs.readFileSync(filePath).toString(); }); _fs.writeFileSync(distPath, out.join('\n')); console.log(' '+ distPath +' built.'); } concat({ src : [ 'foo/bar.js', 'foo/lorem.js', 'foo/maecennas.js' ], dest : 'dist/myAwesomeScript.js' });
17. Workflows Times have changed. Now distributing your JavaScript code can be a complex endeavor SPA’s rely on heavy libraries
18. Grunt.js
19. Gulp.js
20. Browsify Bundles all CommonJS modules browserify main.js > bundle.js
21. Webpack Includes more file formats .css .jsx .html More monolithic require('html!./file.html')
22. There are two ways that a language becomes important. “The first is as a source or proving ground for important ideas. This includes languages like Smalltalk and Scheme. These languages are not widely used, but are generally recognized as brilliant, but out of fashion. They have a powerful influence on language designers. The second way that a language becomes important is by becoming popular.” -Douglas Crockford
23. For next talk Send a PR at https://github.com/isloojs/talks