Post on 15-Feb-2017
MODULAR DESIGN WITH ES6@DANJFERRERQUEENS JS MEETUP / SEPTEMBER 2ND 2015
** Insert cheap plug/talk personal details here **
@danjferrer
ferrer@bounceexchange.comdanielferrer212@gmail.com
- Modules: History and Current State In JS
- ES6 Syntax/Module Definitions
- Use with the browser today
- Why Modular Design + ES6 makes better code
WHAT IS MODULARITY?
“Separation of code into various pieces, maintaining separation of concerns, which in turn makes code easier to test and easier to refactor”
HOW ARE PIECES OF JAVASCRIPT CODE DEFINED TODAY?
-REQUIREJS DOCS
DEFINED VIA AN IMMEDIATELY EXECUTED FACTORY FUNCTION.
REFERENCES TO DEPENDENCIES ARE DONE VIA GLOBAL VARIABLE NAMES THAT WERE LOADED
VIA AN HTML SCRIPT TAG.
THE DEPENDENCIES ARE VERY WEAKLY STATED: THE DEVELOPER NEEDS TO KNOW THE RIGHT
DEPENDENCY ORDER. FOR INSTANCE, THE FILE CONTAINING BACKBONE CANNOT COME BEFORE
THE JQUERY TAG.
IT REQUIRES EXTRA TOOLING TO SUBSTITUTE A SET OF SCRIPT TAGS INTO ONE TAG FOR
OPTIMIZED DEPLOYMENT.
Do I need all my code in a single file?Do I need to write my code inside
many files?Do I need to write my code in various
modules?Can I handle a lot of script tags?
Should said tags be loaded in order?
REVEALING MODULES
I LITERALLY CAN’T EVEN
Let’s try to use less of these: <script>
JAVASCRIPT MODULE DEFINITIONSCommon JS Modules:
•Designed with compact syntax
•synchronous loading
•Primarily used for the server
•Used with NodeJS and Ringo
Asynchronous Module Definition (AMD)
•Syntax is slightly more complicated
•Asynchronous Loading
•Primarily used for the browser
•Fits better with JavaScripts async nature
COMMONJS VS AMD
MODULES IN ES 6/HARMONY
IMPORTS/EXPORTS
EXPORTING SINGLE FUNCTIONS
CLASSES ARE HERE!
USING AS YOUR COMPILER
$ NPM INSTALL -G BABEL$ BABEL-NODE
FOR CURRENT CJS AND AMD PROJECTS
SHOULD I/SHOULD I NOT?
•Declarative syntax and supports single/multiple imports/exportsSupports asynchronous loading out of the box
Programmatic APIStatic Module Structure
AND IT’S NATIVE