Building Modern, Modular JavaScript Applications

Presented @ Netcentric Summit 2016
Barceló convention center
Seville, Spain

More and more logic is moving from the server to the client side. The complexity of front-end applications is increasing rapidly and the end users are expecting highly interactive user interfaces.

Developing with a modular approach helps you to build more complex, scalable and robust applications. Existing modular solutions are very fragmented and are now being replaced by the new standards of ECMAScript 2015. We have new ways of writing our JavaScript code and this affects our current workflows.

Transcript

1. Building Modern, Modular JavaScript Applications Netcentric Summit 2016
2. Erik Grijzen Senior Frontend Developer @ Netcentric @ErikGrijzen www.erikgrijzen.com
3. What is a module?
4. Single purpose Do one thing and do one thing well - Unix philosophy
5. It can live on it’s own. Independent
6. Self contained Encapsulated private implementation.
7. Public interface Exposes functionality for others to consume.
8. Interchangeable Plug and play.
9. Why do we need to write modular code?
10. The rise of Web Apps Increasing frontend code complexity.
11. Better reusability Don’t reinvent the wheel.
12. Copying code Project A Project B js
13. Better maintainability Updating a small, self-contained and independent module is much easier.
14. Better testability Testing a small, self-contained and independent module is much easier.
15. The global namespace Global namespace pollution and naming conflicts.
16. Improved dependency management More explicit control over your dependencies.
17. Script tag vomit
18. Updating external libraries
19. Included third party libraries into source control
20. Optimized deployment An easy way to deploy your code.
21. Libraries where you don’t use all its functionality
22. Manual custom builds
23. Modules allow us to build more complex, large-scale and robust applications.
24. The evolution of JavaScript modules
25. Grouping code var myApp = window.myApp || {}; myApp.myModule = { init: function() { ... } }; myApp.myModule.init();
26. (function(){ // Private scope })(); Encapsulation
27. (function($) { // Global import })(jQuery); Encapsulation
28. var Counter = (function () { var counter = 0; function increment() { counter++; } return { increment: increment, }; })(); Counter.increment(); Exposing a public interface
29. var Counter = (function () { var counter = 0; function increment() { counter++; } return { increment: increment, }; })(); Counter.increment(); Exposing a public interface Private implementation
30. var Counter = (function () { var counter = 0; function increment() { counter++; } return { increment: increment, }; })(); Counter.increment(); Exposing a public interface Public interface Private implementation
31. // counter.js var counter = 0; function increment(){ counter++; } module.exports = { increment: increment } CommonJS
32. // counter.js var counter = 0; function increment(){ counter++; } module.exports = { increment: increment } CommonJS // main.js var counter = require("./counter.js"); counter.increment();
33. CommonJS • Standard for NodeJS • Synchronous • Build step required for browser support
34. // counter.js define('counter', function() { var counter = 0; function increment() { counter++; } return { increment: increment }; }); Asynchronous Module Definition (AMD)
35. // counter.js define('counter', function() { var counter = 0; function increment() { counter++; } return { increment: increment }; }); Asynchronous Module Definition (AMD) // main.js define('main', ['counter'], function(counter) { counter.increment(); });
36. AMD • Mostly for browsers • Asynchronous • No build step • Lazy loading
37. Module system fragmentation.
38. Supporting all module formats.
39. (function (root, factory) { if (typeof define === 'function' && define.amd) { define([], factory); } else if (typeof module === 'object' && module.exports) { module.exports = factory(); } else { root.returnExports = factory(); } }(this, function () { var counter = 0; return { increment: function() { counter++; }; } })); Universal Module Definition (UMD)
40. (function (root, factory) { if (typeof define === 'function' && define.amd) { define([], factory); } else if (typeof module === 'object' && module.exports) { module.exports = factory(); } else { root.returnExports = factory(); } }(this, function () { var counter = 0; return { increment: function() { counter++; }; } })); Universal Module Definition (UMD) AMD
41. (function (root, factory) { if (typeof define === 'function' && define.amd) { define([], factory); } else if (typeof module === 'object' && module.exports) { module.exports = factory(); } else { root.returnExports = factory(); } }(this, function () { var counter = 0; return { increment: function() { counter++; }; } })); Universal Module Definition (UMD) AMD CJS
42. (function (root, factory) { if (typeof define === 'function' && define.amd) { define([], factory); } else if (typeof module === 'object' && module.exports) { module.exports = factory(); } else { root.returnExports = factory(); } }(this, function () { var counter = 0; return { increment: function() { counter++; }; } })); Universal Module Definition (UMD) AMD CJS Global
43. (function (root, factory) { if (typeof define === 'function' && define.amd) { define([], factory); } else if (typeof module === 'object' && module.exports) { module.exports = factory(); } else { root.returnExports = factory(); } }(this, function () { var counter = 0; return { increment: function() { counter++; }; } })); Universal Module Definition (UMD) AMD CJS Global Module
44. There must be a better way!
45. A new way of writing JavaScript code.
46. ES2015 Modules
47. Modules are stored in files. JS
48. Code is executed once it’s loaded.
49. All code stays local to the module.
50. Modules can import functionality.
51. Modules can export functionality.
52. One module per file.
53. One file per module.
54. Modules are singletons.
55. A brief overview of the ES2015 module syntax
56. Import & Export
57. // counter.js var counter = 0; function increment() { return counter++; } function reset() { counter = 0; } Multiple named exports
58. // counter.js var counter = 0; export function increment() { return counter++; } export function reset() { counter = 0; } Multiple named exports
59. // counter.js var counter = 0; export function increment() { return counter++; } export function reset() { counter = 0; } Named import // app.js import { increment } from 'counter'; increment(); // 1
60. // counter.js var counter = 0; export function increment() { return counter++; } export function reset() { counter = 0; } Namespace import // app.js import * as counter from 'counter'; counter.increment(); // 1 counter.reset(); // 0
61. // func.js export default function() { ··· } Single default export
62. // func.js export default function() { ··· } Default import // app.js import myFunc from 'func'; myFunc();
63. Benefits over CJS and AMD? • Cleaner syntax • Sync and async • Multiple exports • Cyclic dependencies • Static module structure
64. Static module structure
65. // Error if (someBooleanValue) { import myModule from 'module1'; } else { import myModule from 'module2'; } Static imports & exports
66. Benefits of a static module structure? • Dead code elimination • Variable checking • Type checking
67. Module syntax IDE support
68. Browser support:
69. What now?!?
70. Instead of waiting on browser adoption...
71. Transpiler allow us to use the future syntax today!
72. What are transpilers?
73. ES2015 ES5 compile
74. ES2015 ES5 compile CommonJS
75. ES2015 ES5 compile AMD
76. ES2015 ES5 compile Other
78. Module Loader API
79. Module Loader API (not part of ES2015)
80. System.import('counter') .then(function(counter) { counter.increment(); }) .catch(function() { ··· }); Loader API
81. JS JS JS JS JS JS JS Module Loader JS
82. In the future HTTP/2 will be able to load all modules asynchronously in production.
83. Until then, we have to bundle our modules into one single file.
84. Module bundling.
86. Modern module bundlers have a transpiler built-in.
87. How does bundling work?
88. Traversing the dependency tree. main.js bundle.js JS JS JS JS JS JS JS
89. Mixing different module systems. main.js bundle.js AMD CJS ES2015 JS JS JS JS
90. Easy code splitting for lazy loading. bundle1.js AMD CJS ES2015 bundle2.js bundle3.js JS JS JS JS
91. Bundling common code together. bundle1.js AMD CJS ES2015 bundle2.js bundle3.js common.js JS JS JS JS
92. Tree-shaking
93. Normal bundling behavior. counter.js increment() { … } reset() { … }
94. Normal bundling behavior. import { increment } from ‘counter’; increment(); counter.js main.js increment() { … } reset() { … }
95. Normal bundling behavior. counter.js increment() { … } reset() { … } import { increment } from ‘counter’; increment(); main.js bundle.js increment() { … } reset() { … } increment();
96. Removing unused exports. counter.js increment() { … } reset() { … } import { increment } from ‘counter’; increment(); main.js bundle.js increment() { … } reset() { … } increment();
97. Removing unused exports. import { increment } from ‘counter’; increment(); counter.js main.js bundle.js increment() { … } reset() { … } increment() { … } increment();
98. Modularization
99. Third party modules.
100. Package Managers
102. NPM - The biggest package manager on earth!
103. www.modulecounts.com
104. What is a package?
105. A folder containing a program. Package index.js
106. This program is described by a package.json file. Package index.js package.json
107. { "name": "test-package", "version": "1.0.0", "main": "index.js", "repository": { "type": "git", "url": "git+https://github.com/..." }, "author": "Erik Grijzen" } package.json
108. Ideal workflow: Two step approach
109. 1). Installing a package. > npm install angular --save Terminal
110. { "name": "test-package", "version": "1.0.0", "main": "index.js", "dependencies": { "angular": "1.4.9", }, "author": "Erik Grijzen" } package.json
111. 2). Import a package. import angular from 'angular'; index.js
112. Package installation folder. Package /node_modules index.js package.json
113. Excluding installed packages from source control. Package /node_modules index.js package.json .gitignore
114. Semantic versioning.
115. 1.0.0 Published packages Not everyone is following this rule
116. 1.0.1 Patch release Bug fixes and patches.
117. 1.2.0 Minor release New features that don’t break existing features.
118. 2.0.0 Major release Changes that break backwards compatibility.
119. Useful version ranges.
120. ~1.0.0 Installs: 1.0.8 Automatic bugfix updates.
121. ^1.0.0 Installs: 1.4.9 Automatic bugfix and feature updates.
122. Don’t blindly trust all published packages.
123. Modern component-based architecture
124. Most modern frameworks support component-based development.
125. Composing your application into smaller components. Component
126. Modularized components.
127. Component
128. One entry point. JS
129. Importing other assets. JS HTML CSS PNG JS
130. Importing other assets. JS JADE SCSS PNG JS
131. Component-based project structure
132. Self-contained components. Component component.js component.css component.html component.test.js image.png
133. import styles from './component.css'; import template from './component.html'; import image from './logo.png'; var img = document.createElement('img'); img.src = image; Importing other assets
134. Inlining all static assets. Component Component Component Component bundle.js
135. Create separate bundles. Component Component Component Component bundle.js bundle.css logo.png
136. Creating common bundles. Component Component Component Component bundle.js bundle.css logo.png common.css
137. Easily removing components. Component Component Component Component bundle.js bundle.css
138. Easily removing components. Component Component Component bundle.js bundle.css
139. Developer experience
140. We are all familiar with browser syncing.
141. What about module syncing?
142. Hot module loaders
143. Live editing experience.
144. Frameworks and libraries are moving to ES2015.
145. Focus on learning the new JavaScript standards.
146. The future is bright, let’s start using ES2015 today!
147. Thank you! Senior Frontend Developer @ Netcentric @ErikGrijzen www.erikgrijzen.com