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