Skip to content

Final Paper #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Psylynce wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Final Paper #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
49b902a
Create talk.md
spoonertb Apr 30, 2013
150ed7a
Update talk.md
spoonertb Apr 30, 2013
f5c20f2
Update talk.md
spoonertb Apr 30, 2013
cd1e223
Update talk.md
spoonertb Apr 30, 2013
dc33f77
Update talk.md
spoonertb Apr 30, 2013
6ca8a92
Update talk.md
spoonertb Apr 30, 2013
f97e409
Update talk.md
spoonertb Apr 30, 2013
a0c3e0e
Update talk.md
spoonertb Apr 30, 2013
cba5094
Merge pull request #1 from spoonertb/master
bonesyo Apr 30, 2013
710b6e6
Update talk.md
bonesyo Apr 30, 2013
dd988dc
Update ModuleProposal.md
bonesyo May 3, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 27 additions & 21 deletions ModuleProposal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,48 @@
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';
module SolarSystem = Universe.MilkyWay.SolarSystem;
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';
Expand All @@ -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;
```

Expand All @@ -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'));
Expand All @@ -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 {
Expand Down Expand Up @@ -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/)


153 changes: 153 additions & 0 deletions talk.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
##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
* 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

```javascript
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
```

##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

```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

```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

##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/)

[Modules in the Past](https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Using)