Tips and Tricks in a world of Mix

That’s my series of posts on a SPA subject .

Connection to the next post in the series :

                                                               SPA 1.1 – Getting Started with code –>

 

image

wiki – Single-page application

pros :

  • Expected reaction even without wifi
  • Fluid UX Experience
  • Usually with single page load

image

 

Definition of a SPA :

  1. Maintain Navigation ,
  2. Maintain History ,
  3. Deep Linking- when going from page to page it’s not really going to another page, it’s loading a different information on the same page .
  4. Persisting important state on the client  – for instance data that is not likely to be changed (code tables) . Not the whole database but still.
  5. Fully\mostly loaded in the initial page load
  6. Progressively downloads features as required
    Additionally handled issues that we meet in RIA plug-in apps :
  • Async services
  • Client-side application & business logic
  • Long-lived client-side state
  • 2-way data binding (MVVM)
  • Tombstoning /dropped connections – when your app crushes to get back to the point you stopped the last time .

 

    Code Camper overview :

 

  • Using SamiJS for rodding in history feature – allowing to go back and forth in pages
  • Using fade-in on JQuery animation
  • The idea with the star grade for the speaker is to intercept on the transition and check out is it ok to leave the current page or not
  • Tombstone – remembers the uri  and the filters , so even if we close the browser when we come back it’ll open the wright page and the filter that you’ve find before.

 

Technologies of the SPA

image

 

 

Server Technologies

  • DB used SQL CE

 

  • ORM as EF Code First through POCO Models
  • Repositories implementing CRUD (create update delete)  per sessions
  • Unit of Work is the way to aggregate to CRUD data with multiple different Repositories

 

  • Asp.net Web API Exposing the API to the client – interact through Ajax and return JSON.

 

image

 

  • Web Optimization – turn on the minification and bundling for js and css files
  • Ninject IOC  – lets you decouple your classes on the server
  • Json.net

 

 

Client Technology

  • Html5 pros – tags such as section , article , placeholder and a validation attribute
  • Modernizr  – deals with fallbacks, if the browser doesn’t support some HTML5 feature
  • Html5 Boilerplate – gives you the start for developing the HTML5 apps (for instance includes Modernizr in the project )

 

image

 

Javascript Patterns

  • AMD – Resolve our dependencies through our JavaScript modules.

from wiki

Asynchronous module definition (AMD) is a JavaScript API for defining modules such that the module and its dependencies can be asynchronously loaded. It is useful in improving the performance of websites by bypassing synchronous loading of modules along with the rest of the site content.

In addition to loading multiple JavaScript files at runtime, AMD can be used during development to keep JavaScript files encapsulated in many different files. This is similar to other programming languages, for example java, which support keywords such as import, package, and class for this purpose. It is then possible to concatenate and minify all the source JavaScript into one small file used for production deployment.

 

  • Revealing Module Pattern – reveal only the needed parts of the modules publicly
  • Prototypes – improving the performance , reduce some code and save memory space
  • MVVM – model-view-viewmodel –

separate our models – which is our data

and our views  – which are our html

from our viewmodels – which are our JavaScripts

image

 

Libraries

 

image

 

jquery.mockjson – creates a mock data

jquery.activity – can create commands under the ui layer

toastr.js – setting the message throughout the application

 

Connection to the next post in the series :

                                                               SPA 1.1 – Getting Started with code –>

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: