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