Good application development is all about making educated choices - PART 2: AMD

This talk is focused on Asynchronous Module Definition (AMD). Talk aims to provide wider understanding of the topic in the context of using it along with AngularJS. Secondary objective is to bring alternative solution to light and comparing to help you to decide which one is best for building your application.

There are many great frameworks allowing developers to start writing web applications almost effortlessly, without the need of long hours of studying its API. Angular as framework of MEAN stack choice is a good example of it.

It is very easy to get started with Angular. It doesn’t take much time to learn basic concepts such as: two-way bindings, MV(W) pattern followed by controllers, directives and services. learning curve, however, quickly becomes steeper, when it comes to mastering framework lower level APIs and using it in solving more complex issues.

But there is more. Coding convention, structuring the project, code extensibility are still just the tip of the iceberg. As there are many different practices adopted by the community it isn’t always obvious how to get it all right, especially the first time.

Transcript

1. GOOD APPLICATION DEVELOPMENT IS ALL ABOUT MAKING EDUCATED CHOICES @rusticode http://rusticode.com PART 2: ANGULAR MODULES
2. AMD Asynchronous Module Definition @rusticode http://rusticode.com
3. MODULE a detachable self-contained
 unit of a spacecraft ( from Google ) @rusticode http://rusticode.com
4. @rusticode http://rusticode.com
5. MODULE a self-contained unit or item, such as an assembly of electronic components and associated wiring or a segment of computer software, which itself performs a defined task and can be linked with other such units to form a larger system ( from collinsdictionary.com )
 http://www.collinsdictionary.com/dictionary/english/module @rusticode http://rusticode.com
6. function
 low level encapsulation > class / object
 higher level encapsulation > module
 high level encapsulation MODULAR ENCAPSULATION @rusticode http://rusticode.com
7. MODULAR PATTERN In software engineering, the module pattern is a design pattern used to implement the concept of software modules, defined by modular programming, in a programming language with incomplete direct support for the concept. in software engineering, by Wikipedia 
 http://en.wikipedia.org/wiki/Module_pattern @rusticode http://rusticode.com
8. MODULAR PATTER IN JAVASCRIPT var myModule = (function () { ! var privateKey: privateValue; ! function privateFunction() { // … } ! return = { variableKey: variableValue, functionKey: privateFunction } ! })(); @rusticode http://rusticode.com
9. MODULAR PATTERN You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc. by Angular 
 https://docs.angularjs.org/guide/module functions
 properties > controllers, services, filters, directives, etc. > module
 container @rusticode http://rusticode.com IN
10. AMD Asynchronous Module Definition @rusticode http://rusticode.com
11. The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. https://github.com/amdjs/amdjs-api/wiki/AMD Asynchronous Module Definition @rusticode http://rusticode.com
12. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross-domain access problems. Asynchronous Module Definition https://github.com/amdjs/amdjs-api/wiki/AMD @rusticode http://rusticode.com
13. WHY AMD? • Web sites are turning into Web apps • Code complexity grows as the site gets bigger • Assembly gets harder • Developer wants discrete JS files/modules • Deployment wants optimised code in just one or a few HTTP calls http://requirejs.org/docs/whyamd.html Problems http://requirejs.org/docs/why.html @rusticode http://rusticode.com
14. • Some sort of #include/import/require • ability to load nested dependencies • ease of use for developer but then backed by an optimisation tool that helps deployment Solution WHY AMD? http://requirejs.org/docs/whyamd.html http://requirejs.org/docs/why.html @rusticode http://rusticode.com
15. WHAT ANGULAR DOES NOT? "Angular modules don't try to solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and both module systems can live side by side and fulfil their goals". https://docs.angularjs.org/tutorial/step_07 @rusticode http://rusticode.com
16. AMD WITH ANGULAR Available options • RequireJS - http://requirejs.org/ • Browserify - http://browserify.org/ • $script.js - http://dustindiaz.com/scriptjs @rusticode http://rusticode.com
17. …it’s kind of complicated AMD WITH ANGULAR @rusticode http://rusticode.com
18. AMD WITH ANGULAR ocLazyLoad 
 https://github.com/ocombe/ocLazyLoad ! angular-require-lazy
 https://github.com/nikospara/angular-require-lazy Try external libraries All modules have to be load at start by default All modules dependencies have to be load with module Available solutions? Manual service instantiation via providers" ($compileProvider, $controllerProvider) @rusticode http://rusticode.com
19. CODE EXAMPLES OF USING AMD WITH ANGULAR NO! DEFINITELY NOT… http://developer.telerik.com/featured/requiring-vs-browerifying-angular/ Working with RequireJS and AngularJS was a vacation on Shutter Island. On the surface everything looks very normal. Under that surface is Ben Kingsley and a series of horrific flashbacks. 
 - Burke Holland @rusticode http://rusticode.com Why?
20. Alternatives please! @rusticode http://rusticode.com
21. LET’S GULP IT - 1 echo '{}' > package.json $ npm install --global gulp $ npm install --save-dev gulp gulp-concat Init package.json Install gulp dependencies @rusticode http://rusticode.com
22. LET’S GULP IT - 2 var gulp = require('gulp') var concat = require('gulp-concat') gulp.task('js', function () { gulp.src(['src/**/module.js', 'src/**/*.js']) .pipe(concat('app.js')) .pipe(gulp.dest('.')) }) ! gulp.task('watch', ['js'], function () { gulp.watch('src/**/*.js', ['js']) }) Create gulpfile.js @rusticode http://rusticode.com
23. LET’S GULP IT - 3 (function() { ! function SomeService($q) { function exposedMethod() { … } return { exposedMethod: exposedMethod } } ! angular .module("yourApp") .factory("page", SomeService); ! })() Protect your globals @rusticode http://rusticode.com
24. CONCATS VS AMD Concat is simple and works all right With concats we can package code files into just one bulk of code that is loaded on start @rusticode http://rusticode.com Drawback Because all files are loaded on start, application can’t profit from lazy-loading
25. CONCAT vs AMD @rusticode http://rusticode.com
26. Like different super heroes have different powers Different available solution have different advantages! @rusticode http://rusticode.com
27. BEST SOLUTION ES6 Modules Angular 2.0 will use ES6 modules Vojta Jina - Dependency Injection - NG-Conf" http://youtu.be/_OGGsf1ZXMs (starts at: 11:34) @rusticode http://rusticode.com import {DependencyModule} from "./dep-module"; ! export class NewModule { … }
28. MORE RESOURCES https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917 Best Practices for Building Angular.js Apps" Browserify? Require.js? Doesn’t Angular.js have modules? http://developer.telerik.com/featured/requiring-vs-browerifying-angular/ Requiring vs Browserifying Angular http://ify.io/lazy-loading-in-angularjs/ Lazy lading in AngularJS @rusticode http://rusticode.com