Tips and Tricks in a world of Mix

image

image

You know exactly where one ravioli end and another begins ..

Separation of control

image

Revealing Module Pattern

 

image

Each Module in charge for one thing , and we don’t care how it does it.

An example of dataservice – it’s purpose is to get some person

We have an inner/private function , that will be called dataservice.getPerson()

And we have an external dependency by jQuery ($) also.

 

image

 

 

Solving Modularity with Require.js

Lets assume JavaScript files must be loaded in a specific order – then we can use require..

Separation of Concerns

Define the Dependencies

Load Scripts in the Proper Sequence

image

 

 

define the name of the module , add module dependencies and wright the module logic itself.

image

  • now at the start page reference the require.js
  • add data-main attribute to tell from where you begin the loading , where we have a full list of JavaScript files – kickoff point
  • and require the “alerter” – attention , we didn’t even tell “alerter”anything about dataservice.
  • you can make an alias by paths in requirejs.config  ->  paths:{‘jquery”: “jquery-1.7… “}
  • you can add baseUrl to define the wright folder to look for the js files

 

In Bundles add jQuery and third party libs we load them  from the beginning because we haven’t written them as requirejs requires Smile

So actually we load bundles – jsapplibs and jsmocks – that are connected in main

 

main.js

we could rewrite the thrird party libs or just define them to apply the requirejs convention,  for instance :

define3rdPartyModules();

function define3rdPartyModules() {

       // These are already loaded via bundles. 

       // We define them and put them in the root object.

       define('jquery', [], function () { return root.jQuery; });

       define('ko', [], function () { return root.ko; });

       define('amplify', [], function () { return root.amplify; });

       define('infuser', [], function () { return root.infuser; });

       define('moment', [], function () { return root.moment; });

       define('sammy', [], function () { return root.Sammy; });

       define('toastr', [], function () { return root.toastr; });

       define('underscore', [], function () { return root._; });

   }

 

loadPluginsAndBoot() – extends for other libraries

ko bindingHandlers for instance  – we want to be sure to be loaded only after the third party libraries are loaded.

function loadPluginsAndBoot() {

      // Plugins must be loaded after jQuery and Knockout,

      // since they depend on them.

      requirejs([

              ‘ko.bindingHandlers’,

              ‘ko.debug.helpers’

      ], boot);

  }

the boot from main.js  – running the bootstrapper.js 

 

config.js – repository of information for my app – it’s a constants file , what routes I’m going to support, expirations, throttle and titles, whether I want to use mock or a real data – the global switches ..

 

bootstrapper.js  – dependent on  -> ‘routeConfig’, ‘presenter’, ‘dataprimer’

bootstrapper gives the client the most needed data to upload the app without relaying on WIFI!!

 

dataprimer.js – dependent on –>  ‘ko’, ‘datacontext’, ‘config’

reveiling module pattern – factory for creating a data primer

uses config for logging

datacontext for getting data

ko for binding the data

Summary

image

 

http://jpapa.me/requirejsdemo

Require.js

Comments on: "SPA 6 – SPA Basics – Separating the Ravioli – Code Camper" (1)

  1. […] SPA 6 – SPA Basics – Separating the Ravioli – Code Camper […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: