Modular Design With EcmaScript 6 Queens JS Meetup
-
Upload
daniel-ferrer -
Category
Technology
-
view
877 -
download
1
Transcript of Modular Design With EcmaScript 6 Queens JS Meetup
![Page 1: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/1.jpg)
MODULAR DESIGN WITH ES6@DANJFERRERQUEENS JS MEETUP / SEPTEMBER 2ND 2015
![Page 3: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/3.jpg)
- Modules: History and Current State In JS
- ES6 Syntax/Module Definitions
- Use with the browser today
- Why Modular Design + ES6 makes better code
![Page 4: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/4.jpg)
WHAT IS MODULARITY?
![Page 5: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/5.jpg)
“Separation of code into various pieces, maintaining separation of concerns, which in turn makes code easier to test and easier to refactor”
![Page 6: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/6.jpg)
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.
![Page 7: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/7.jpg)
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?
![Page 8: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/8.jpg)
REVEALING MODULES
![Page 9: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/9.jpg)
I LITERALLY CAN’T EVEN
![Page 10: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/10.jpg)
Let’s try to use less of these: <script>
![Page 11: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/11.jpg)
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
![Page 12: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/12.jpg)
COMMONJS VS AMD
![Page 13: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/13.jpg)
![Page 14: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/14.jpg)
MODULES IN ES 6/HARMONY
![Page 15: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/15.jpg)
IMPORTS/EXPORTS
![Page 16: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/16.jpg)
EXPORTING SINGLE FUNCTIONS
![Page 17: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/17.jpg)
CLASSES ARE HERE!
![Page 18: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/18.jpg)
![Page 19: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/19.jpg)
USING AS YOUR COMPILER
![Page 20: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/20.jpg)
$ NPM INSTALL -G BABEL$ BABEL-NODE
![Page 21: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/21.jpg)
FOR CURRENT CJS AND AMD PROJECTS
![Page 22: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/22.jpg)
SHOULD I/SHOULD I NOT?
![Page 23: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/23.jpg)
•Declarative syntax and supports single/multiple imports/exportsSupports asynchronous loading out of the box
Programmatic APIStatic Module Structure
AND IT’S NATIVE
![Page 24: Modular Design With EcmaScript 6 Queens JS Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062503/58a3ed701a28ab272e8b5bcd/html5/thumbnails/24.jpg)