From 49b902ab4509db48ac93671d78829ad47458bcb4 Mon Sep 17 00:00:00 2001 From: Thomas Spooner Date: Mon, 29 Apr 2013 21:24:18 -0600 Subject: [PATCH 01/10] Create talk.md --- talk.md | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 talk.md diff --git a/talk.md b/talk.md new file mode 100644 index 0000000..b41eadd --- /dev/null +++ b/talk.md @@ -0,0 +1,109 @@ +##Addition of Module Functionality to ES.next/Javascript + +CSCI 3155 - Lightning Talk + +Thomas Spooner, Justin Powell, James Ontiveros + +##Overview: + +* Currently, Javascript doesn't have an easy way to reuse code throughout a project +* Modules would allow such reuse to happen in an easy way +* Modules will make javascript more scalable in a sense of new features and easy implementation + +##Details of Development +* Modules have been approved for ES.next +* Good News!!! + +##History +* Modules have been in javascript, but they weren't easy to use + +##How it looked before + + ```javascript + var MODULE = (function (my) { + // add capabilities... + + return my; + }(MODULE || {})); + ``` + +##What are modules +* Modules are blocks of code that can be reused throughout a project +* They allow a programmer to choose which variables or functions to import or export +* They make code look clean and concise + +##Module Example + ```javascript + module Car{ + // import code here + // export code here + } + ``` +##Module Instances +* These are modules that have been evaluated, linked to other modules, or holds lexically encapsulated data +* These are basically objects that a programmer may use + + ```javascript + module myCar at "Car.js"; + ``` + +##Compared to other languages +* Python: `import fibo` (imports fibonacci function) +* Java: `import java.module.annotation.*;` (module in Java) +* Javascript: `????` (why???) + +##Importing Code +* This lets programmers bring code into their project, either an entire module or just selected items from that module + +##Import Example + ```javascript + import Car; + + import drive from Car; + + import {drive, miles} from Car; + ``` +##Exporting Code +* Txporting lets the programmer choose which blocks of code can be accessed by the porgram +* Declarations declare that a local binding at the top-level of the module is visible externally to the module +* Other modules can read the module exports but cannot modify or reset them + +##Exporting Example + + ```javascript + module Car{ + // Internal + var license-plate = "555-444"; + // External + export var miles = 5000; + export function drive(speed, direction){ + console.log('details: ', speed, direction); + } + } + ``` +##Comparison to Classes +* Modules basically have public and private variables, internal and external parts of the module +* Modules allow for the reuse of code throughout an entire project + +##Example Classes: Before and proposed + +##Module Loader - Tom will fill this +* Es.next aims to develop a "dynamic, reflexive API for loading module scripts +* Functionality similar to import as shown below + + ```javascript + Loader.load('car.js', function(car) { + console.log(car.drive(500, 'north')); + }, function(err) { + console.log('Error:' + err); + }); + ``` + +##Proposal +* Implement modules into javascript +* They will help make javascript easier to use and cleaner +* Clean up how we declare modules + +##Conclusion +* Modules are awesome and should be put into javascript +* They help outside of web development From 150ed7a5698459fb5a17af9cb085da5d5ed59198 Mon Sep 17 00:00:00 2001 From: Thomas Spooner Date: Mon, 29 Apr 2013 21:26:32 -0600 Subject: [PATCH 02/10] Update talk.md --- talk.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/talk.md b/talk.md index b41eadd..79e35f1 100644 --- a/talk.md +++ b/talk.md @@ -19,7 +19,7 @@ Thomas Spooner, Justin Powell, James Ontiveros ##How it looked before - ```javascript + ```javascript var MODULE = (function (my) { // add capabilities... From f5c20f230a362eba0d4146458ce46bd4b1125e11 Mon Sep 17 00:00:00 2001 From: Thomas Spooner Date: Mon, 29 Apr 2013 21:31:48 -0600 Subject: [PATCH 03/10] Update talk.md --- talk.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/talk.md b/talk.md index 79e35f1..b87f762 100644 --- a/talk.md +++ b/talk.md @@ -87,6 +87,22 @@ Thomas Spooner, Justin Powell, James Ontiveros ##Example Classes: Before and proposed +```javascript + module widgets { + // ... + class DropDownButton extends Widget { + constructor(attributes) { + super(attributes); + this.buildUI(); + } + buildUI() { + this.domNode.onclick = function(){ + // ... + }; + } + } +} +``` ##Module Loader - Tom will fill this * Es.next aims to develop a "dynamic, reflexive API for loading module scripts * Functionality similar to import as shown below From cd1e2234c48568c3e4832e24cb64cf65bdca4245 Mon Sep 17 00:00:00 2001 From: Thomas Spooner Date: Mon, 29 Apr 2013 21:32:52 -0600 Subject: [PATCH 04/10] Update talk.md --- talk.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/talk.md b/talk.md index b87f762..d98240b 100644 --- a/talk.md +++ b/talk.md @@ -88,18 +88,18 @@ Thomas Spooner, Justin Powell, James Ontiveros ##Example Classes: Before and proposed ```javascript - module widgets { - // ... - class DropDownButton extends Widget { - constructor(attributes) { - super(attributes); - this.buildUI(); - } - buildUI() { - this.domNode.onclick = function(){ - // ... - }; - } +module widgets { + // ... + class DropDownButton extends Widget { + constructor(attributes) { + super(attributes); + this.buildUI(); + } + buildUI() { + this.domNode.onclick = function(){ + // ... + }; + } } } ``` From dc33f77ea33853973aa734d074d1dd83f0209d60 Mon Sep 17 00:00:00 2001 From: Thomas Spooner Date: Mon, 29 Apr 2013 21:35:30 -0600 Subject: [PATCH 05/10] Update talk.md --- talk.md | 71 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 35 insertions(+), 36 deletions(-) diff --git a/talk.md b/talk.md index d98240b..c120b2d 100644 --- a/talk.md +++ b/talk.md @@ -19,13 +19,13 @@ Thomas Spooner, Justin Powell, James Ontiveros ##How it looked before - ```javascript - var MODULE = (function (my) { - // add capabilities... +```javascript + var MODULE = (function (my) { + // add capabilities... - return my; - }(MODULE || {})); - ``` + return my; + }(MODULE || {})); +``` ##What are modules * Modules are blocks of code that can be reused throughout a project @@ -33,19 +33,19 @@ Thomas Spooner, Justin Powell, James Ontiveros * They make code look clean and concise ##Module Example - ```javascript - module Car{ - // import code here - // export code here - } +```javascript + module Car{ + // import code here + // export code here +} ``` ##Module Instances * These are modules that have been evaluated, linked to other modules, or holds lexically encapsulated data * These are basically objects that a programmer may use - ```javascript - module myCar at "Car.js"; - ``` +```javascript + module myCar at "Car.js"; +``` ##Compared to other languages * Python: `import fibo` (imports fibonacci function) @@ -56,13 +56,12 @@ Thomas Spooner, Justin Powell, James Ontiveros * This lets programmers bring code into their project, either an entire module or just selected items from that module ##Import Example - ```javascript - import Car; - - import drive from Car; +```javascript + import Car; + import drive from Car; + import {drive, miles} from Car; +``` - import {drive, miles} from Car; - ``` ##Exporting Code * Txporting lets the programmer choose which blocks of code can be accessed by the porgram * Declarations declare that a local binding at the top-level of the module is visible externally to the module @@ -70,17 +69,17 @@ Thomas Spooner, Justin Powell, James Ontiveros ##Exporting Example - ```javascript - module Car{ - // Internal - var license-plate = "555-444"; - // External - export var miles = 5000; - export function drive(speed, direction){ - console.log('details: ', speed, direction); - } +```javascript + module Car{ + // Internal + var license-plate = "555-444"; + // External + export var miles = 5000; + export function drive(speed, direction){ + console.log('details: ', speed, direction); } - ``` + } +``` ##Comparison to Classes * Modules basically have public and private variables, internal and external parts of the module * Modules allow for the reuse of code throughout an entire project @@ -107,13 +106,13 @@ module widgets { * Es.next aims to develop a "dynamic, reflexive API for loading module scripts * Functionality similar to import as shown below - ```javascript - Loader.load('car.js', function(car) { - console.log(car.drive(500, 'north')); - }, function(err) { - console.log('Error:' + err); +```javascript + Loader.load('car.js', function(car) { + console.log(car.drive(500, 'north')); + }, function(err) { + console.log('Error:' + err); }); - ``` +``` ##Proposal * Implement modules into javascript From 6ca8a926db3b8ec0bf867202adbd124dc3e29f99 Mon Sep 17 00:00:00 2001 From: Thomas Spooner Date: Mon, 29 Apr 2013 21:36:49 -0600 Subject: [PATCH 06/10] Update talk.md --- talk.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/talk.md b/talk.md index c120b2d..b34be26 100644 --- a/talk.md +++ b/talk.md @@ -37,8 +37,8 @@ Thomas Spooner, Justin Powell, James Ontiveros module Car{ // import code here // export code here -} - ``` + } +``` ##Module Instances * These are modules that have been evaluated, linked to other modules, or holds lexically encapsulated data * These are basically objects that a programmer may use @@ -93,13 +93,13 @@ module widgets { constructor(attributes) { super(attributes); this.buildUI(); - } - buildUI() { - this.domNode.onclick = function(){ - // ... - }; - } - } + } + buildUI() { + this.domNode.onclick = function(){ + // ... + }; + } + } } ``` ##Module Loader - Tom will fill this @@ -108,10 +108,10 @@ module widgets { ```javascript Loader.load('car.js', function(car) { - console.log(car.drive(500, 'north')); + console.log(car.drive(500, 'north')); }, function(err) { console.log('Error:' + err); - }); + }); ``` ##Proposal From f97e4098ac01e65256df55ffee9e64b40f7c5277 Mon Sep 17 00:00:00 2001 From: Thomas Spooner Date: Mon, 29 Apr 2013 21:50:06 -0600 Subject: [PATCH 07/10] Update talk.md --- talk.md | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/talk.md b/talk.md index b34be26..057f33b 100644 --- a/talk.md +++ b/talk.md @@ -12,19 +12,35 @@ Thomas Spooner, Justin Powell, James Ontiveros ##Details of Development * Modules have been approved for ES.next +* Modules have been in development for a while to create a seamless implementation * Good News!!! ##History * Modules have been in javascript, but they weren't easy to use +* ##How it looked before ```javascript - var MODULE = (function (my) { - // add capabilities... - - return my; - }(MODULE || {})); +FOO=function(){ + ... + var x=42; + function frobnicator$$WhatzitThingamabobFactoryFactory_foo(a,b){return a+b}; + ... + var g=this; // reference to the global object + return {import: // return an object with a single property, "import" + function(prefix, object){ // which takes optional prefix and object arguments + object=object||g; // if object not provided, use the global object + [['exportedName',Math.PI] // now a list of (export name, expression) pairs + ,['foo',y] + ,['bar',frobnicator$$WhatzitThingamabobFactoryFactory_foo] + ... + ].forEach(function(export){ // see note about forEach below + // for each export, we create a property on the object + // the property name is prefixed by the prefix if one was provided + // the object is either the global object, or the second argument to import() + object[(prefix||'')+export[0]]=export[1]})}} +}(); // close and call the anonymous function ``` ##What are modules From a0c3e0e45b8289bc73e6771ab49fc4b590d4aaab Mon Sep 17 00:00:00 2001 From: Thomas Spooner Date: Mon, 29 Apr 2013 22:06:00 -0600 Subject: [PATCH 08/10] Update talk.md --- talk.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/talk.md b/talk.md index 057f33b..0207bef 100644 --- a/talk.md +++ b/talk.md @@ -17,7 +17,7 @@ Thomas Spooner, Justin Powell, James Ontiveros ##History * Modules have been in javascript, but they weren't easy to use -* +* Modules were long, ugly and hard to follow at times ##How it looked before @@ -135,6 +135,16 @@ module widgets { * They will help make javascript easier to use and cleaner * Clean up how we declare modules +##Why does it matter +* Modules would make it easier to reuse code throughout a project +* Make modules in javascript easier to use and implement + ##Conclusion * Modules are awesome and should be put into javascript * They help outside of web development + +##Works Cited + +[Classes](http://infrequently.org/2012/04/class-warfare/) + +[New Things Coming to Javascript - Modules](http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/) From 710b6e6f2b09d2206ef69664955e1b1a8cf7e2df Mon Sep 17 00:00:00 2001 From: James Ontiveros Date: Mon, 29 Apr 2013 23:41:29 -0600 Subject: [PATCH 09/10] Update talk.md --- talk.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/talk.md b/talk.md index 0207bef..943ed8b 100644 --- a/talk.md +++ b/talk.md @@ -14,9 +14,15 @@ Thomas Spooner, Justin Powell, James Ontiveros * Modules have been approved for ES.next * Modules have been in development for a while to create a seamless implementation * Good News!!! + +##What are modules +* Modules are blocks of code that can be reused throughout a project +* They allow a programmer to choose which variables or functions to import or export +* They make code look clean and concise ##History * Modules have been in javascript, but they weren't easy to use +* Introduced in Gecko 1.9 and used for sharing code between different scopes * Modules were long, ugly and hard to follow at times ##How it looked before @@ -43,11 +49,6 @@ FOO=function(){ }(); // close and call the anonymous function ``` -##What are modules -* Modules are blocks of code that can be reused throughout a project -* They allow a programmer to choose which variables or functions to import or export -* They make code look clean and concise - ##Module Example ```javascript module Car{ @@ -148,3 +149,5 @@ module widgets { [Classes](http://infrequently.org/2012/04/class-warfare/) [New Things Coming to Javascript - Modules](http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/) + +[Modules in the Past](https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Using) From dd988dc41dcd3350151875d2a44f502eb76d25f3 Mon Sep 17 00:00:00 2001 From: James Ontiveros Date: Thu, 2 May 2013 23:30:34 -0600 Subject: [PATCH 10/10] Update ModuleProposal.md --- ModuleProposal.md | 48 ++++++++++++++++++++++++++--------------------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/ModuleProposal.md b/ModuleProposal.md index db9cd77..f99785d 100644 --- a/ModuleProposal.md +++ b/ModuleProposal.md @@ -1,32 +1,32 @@ -Javascript Modification Proposal +JavaScript Modification Proposal ================================ Members: Justin Powell, James Ontiveros, Tom Spooner Overview: --------- -When looking at javascript and what it has to offer, some may wonder what would make it easier. One answer to that question is to add modules into the language and simplify them for easy use. Modules would allow reuse of advantageous code throughout a project. +When looking at JavaScript and what it has to offer, some may wonder what would make it easier. One answer to that question is to add modules into the language and simplify them for easy use. Modules would allow reuse of advantageous code throughout a project. -Modules are similar to objects, but must be explicitly exported to be made visible externally. Modules can either be defined as inline or as external files which allow for use of blocks of code that will be utilized throughout the project. This is very useful if one is looking for an external widget that they want to incorporate into their project. +Modules are similar to objects, but they must be explicitly exported in order to be externally visible. Modules can either be defined as inline or as external files, which allow for use of blocks of code that will be utilized throughout the project. This is very useful if one is looking for an external widget that they want to incorporate into their project. -```javascript +```JavaScript module Car{ // import code // export code } ``` -This simple example shows what a module can do. +This simple example shows the structure of a module. At the top of the module you have all of the variable and function imports, and at the bottom you have all of the functions and variables that you can export into different programs and even modules. Module *instances* are modules which have been evaluated, linked to other modules, or holds lexically encapsulated data. Here is an example of a module instance: -```javascript +```JavaScript module myCar at "car.js" ``` You can also declare modules in the following way: -```javascript +```JavaScript module UniverseTest {}; module Universe { module MilkyWay {} }; module MilkyWay = 'Universe/MilkyWay'; @@ -34,11 +34,15 @@ You can also declare modules in the following way: module MySystem = SolarSystem; ``` +History of Modules: +------------------- +Modules appeared in JavaScript back in 2008 with Gecko 1.9. Gecko is an open source layout engine that was commonly used for Mozilla. When modules were first introduced they were very crude and difficult to follow. Since 2008 there has been no significant changes to modules in JavaScript, even though they have been proven to be extremely powerful tools in other programming languages. The new proposal for modules in ES.next looks very refined and powerful. + Exporting and Importing: ------------------------ -Any `export` declaration make functions and variables visible to other modules. This obviously makes modules very useful when creating a project. It's basically like a class in Java or C++ with public and private variables. The programmer can choose what to export from his/her module which is a powerful tool. Here is an example of some exporting: +Any `export` declaration makes functions and variables visible to other modules. This obviously makes modules very useful when creating a project. It's basically like a class in Java or C++ with public and private variables. The programmer can choose what to export from his/her module, which is a powerful tool. Here is an example of some exporting: -```javascript +```JavaScript module Car { // Internal var licensePlateNo = '556-343'; @@ -55,11 +59,11 @@ Any `export` declaration make functions and variables visible to other modules. ``` A programmer can `import` variables and other functions from another module that he/she wants to utilize. This can be seen above with the `export` declaration in the `Car` module. A programmer may import the function `drive()` or `check()`, or he/she can import the variables `miles` or `color`. Even though a programmer can import these functions or variables, he/she cannot redefine them. (Exports can be renamed to distinguish them from other local variables) -A programmer may also choose what they want to import from certain modules so that they don't need to import the entire thing. This is very useful if the programmer only wants one or function or variable from a module. Even with a few variables or functions it would be smart to not import the entire module if one will not utilize all of its content. +A programmer may also choose what they want to import from certain modules so that they don't need to import the entire thing. This is very useful if the programmer only wants one function or variable from a module. Even with a few variables or functions it would be smart to not import the entire module if one will not utilize all of its content. Import `drive()` from car. -```javascript +```JavaScript import drive from Car; ``` @@ -69,14 +73,14 @@ Import `drive()` and `miles` from car. import {drive, miles} from Car; ``` -Modules are very diverse in what they allow us to do. We can `import` what we need or `export` functions that will come in handy later. They are useful blocks of code that are accessed with a single line of code. This makes writing concise code easier and quicker. A programmer can have his/her modules be the backbone of a project, he/she can then import everything that he/she needs from his/her modules and his/her project will be underway. Open source modules will also help other developers with their projects if they can't be bothered to write their own. `Importing` and `exporting` modules will save a lot of time in the long run. +Modules are very diverse in what they allow us to do. We can `import` what we need or `export` functions that will come in handy later. They are useful blocks of code that are accessed with a single line of code. This makes writing concise code easier and quicker. A programmer can have their modules be the backbone of a project, he/she can then import everything that they need from the modules and the project will be quickly underway. Open source modules will also help other developers with their projects if they can't be bothered to write their own functions. `Importing` and `exporting` modules will save a lot of time and code in the long run. Module Loader API: ------------------ -ES.next states that it aims to develop a "dynamic, reflective API for loading module scripts in controlled and selective contexts." Each host environment comes with a built-in system where users can create custom loaders using the Loader constructor. Some of the goals listed by ES.next in provinding this loading functionality include providing dynamic loading, nested virtualization and state isolation. +ES.next states that it aims to develop a "dynamic, reflective API for loading module scripts in controlled and selective contexts." Each host environment comes with a built-in system where users can create custom loaders using the Loader constructor. Some of the goals listed by ES.next in providing this loading functionality include providing dynamic loading, nested virtualization and state isolation. -The functionality is similar to that of import, in that it can consume anything defined as an export from a seperate module, like below: -```javascript +The functionality is similar to that of import, in that it can consume anything defined as an export from a separate module, like below: +```JavaScript // Signature: load(moduleURL, callback, errorCallback) Loader.load('car.js', function(car) { console.log(car.drive(500, 'north')); @@ -95,13 +99,13 @@ Loader.load('http://json.org/modules/json2.js', load() has 3 arguements, being: * moduleURL: The address of a module to taken in, in the case above, this is car.js -* callback: A callback function which receives the output result of attempting to load, comple and then execute the moduke +* callback: A callback function which receives the output result of attempting to load, compile and then execute the module * errorCallback: A callback triggered if an error occurs during compilation Classes: -------- -The changes being made in ES.next to add class functionality are mostly to simplify readabilty, in which code becomes easier and faster to write. Below is an example comparing code written for ES.next, compared to code written for modern day javascript: +The changes being made in ES.next to add class functionality are mostly to simplify readability, in which code becomes easier and faster to write and comprehend. Below is an example comparing code written for ES.next, compared to code written for modern day JavaScript: ```javascript module widgets { @@ -146,13 +150,15 @@ var widgets = (function(global) { })(this); ``` -As we can see, classes are syntactic sugar for function in the current release of javascript. The benefit of class functionality is to reduce complexity of code, and make it easier to read. +As we can see, classes are syntactic sugar for function in the current release of JavaScript. The benefit of class functionality is to reduce complexity of code, and make it easier to read. The Proposal: ------------- -Overall, the goals set forth in module functionality in ES.next include providing faster compilation, easy external loading, and above all increasing simplicity and usablility. -This reasoning in itself, provides the justification for including modules in the the development of javascript. -Well written modules have the advantage of making code more scalable. That is, when designed well, modules can work independantly of eachother, and can be added or removed efficiently. This has the benefit of making collaboration much easier, as developers can be assigned with the task of designing certain modules independant of one another, and only have to worry about minimal conflicts. Coding styles or preferences can be utilized by the individual, and there is no conflict when they are brought together, hindering the coding process. +Overall, the goals set forth in module functionality in ES.next include providing faster compilation, easy external loading, and above all increasing simplicity and usability. +This reasoning in itself provides the justification for including modules in the development of JavaScript. By implementing the new modules JavaScript will be modernized and up to speed with the other leading languages. +Well-written modules have the advantage of making code more scalable. That is, when designed well, modules can work independently of each other, and can be added or removed efficiently. This has the benefit of making collaboration much easier, as developers can be assigned with the task of designing certain modules independent of one another, and only has to worry about minimal conflicts. The individual can utilize coding styles or preferences, and there is no conflict when they are brought together, hindering the coding process. By utilizing module templates web designers will be able to collaborate to achieve unique and well-developed UI widgets such as drop down menus, and picture sliders. > Sources that will be used are: [strawman:simple_module_functions](http://wiki.ecmascript.org/doku.php?id=strawman:simple_module_functions) and [blogs that we find](http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/) + +