Writing Better Client side code
Rocky Jaiswal
AgilE
Able to move quickly and easily
Nimble
Quick
Brisk
Our SERver side code
MVC or Component Based
Object Oriented
Uses Design Patterns
SOLID
Unit Tested
Feature Tested
Built for Change
BUt What About Client SIDE code?
JavaScript
Interpreted
Prototype Based
Dynamic
Weakly Typed
First Class Functions
JavaScript Module Pattern
var myModule = {
myProperty: "someValue",
// object literals can contain properties and methods.
// e.g we can define a further object for module configuration:
myConfig: {
useCaching: true,
language: "en"
},
// a very basic method
myMethod: function () {
console.log( "Where in the world is Paul Irish today?" );
},
};
// Outputs: Where in the world is Paul Irish today?
myModule.myMethod();
Module Pattern 2
I wish JavaScript had class
CoffeeScript
Classes in coffeescript
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
class Snake extends Animal
move: ->
alert "Slithering..."
super 5
class Horse extends Animal
move: ->
alert "Galloping..."
super 45
sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"
sam.move()
tom.move()
Great! Now I have classes
But what about loading them?
Standard way to Load files in JS
<script source="file1.js" />
<script source="file2.js" />
<script source="file3.js" />
This is horrible!
introducing AMD
Solution to define and load JavaScript Modules Asynchronously
define( module_id /*optional*/, [dependencies] /*optional*/, definition function /*function for instantiating the module or object*/ );
LET US look at an example
RequireJS + Backbone
Code
Thank You
test1
By rockyj
test1
- 802