Developing Single Page Applications (Aka SPA)

This post is the first of a small series that aims at giving enough basic knowledge to start playing around with AngularJS on one’s own system by creating a single page application or SPA.  Unlike a traditional page, a SPA is loaded onto the user’s systems as a single page with all the code necessary for the application to run.  The dynamic interaction occurs by the page retrieving new data from the web server.   The result is a page that acts like an application.  Yet instead of the application getting its data from the user’s system, it is retrieving it via the Internet.  In short, we are talking about the cloud.

Web Basics

Before jumping into building a page, we need to understand the major components of a web page.   A web page can be seen in four main components: Structure, Presention, Interaction and Binding.  Sorry, this does not create some mnemonic acronym unless someone creates a Spid (though urban dictionary will always try).  These components each deliver part of the application to the user.

Structure (HTML) provides the basic elements of the page.  The structure defines the title, body, menu, components and footer. It tells the browser where to find things, such as how to present this structure and additional mobile code.  It is possible to place everything into the structure.  But this becomes unruly.  In general, only basic structure and default data should appear in the base HTML page.  The result of the structure is the creation of the document object model (DOM).  The DOM is how the browser managers the representation of the page.

Presentation (CSS) tells the browser how to render the data.  Data is associated with attributes (via tags). These attributes are initially provided by the structure.  Tags are what tell the browser what style to use in the style sheet.  Think of this like the Matrix.  The tags are symbols for the data.  The symbols give a view of the data that we, the user, sees.

Interaction is defined by scripts. Scripts define the interaction between events and structure. Events can be time related, system related, or intiated by the user.  Scripts in web pages are event oriented.  This means that sections of code are waiting for something to happen in order for them to execute. Script (the mobile code) can change both attributes and data.  Scripts are the magic that transform a static web page into an application.  In our SPA, we are using JavaScript as the primary script.  Additional libraries are often added by web developers.  The key ones are

  • JQuery
  • Underscore, Lodash, Sugar
  • Angular

Finally there is the data.  In a SPA the data is loaded into the page via RESTful calls and then associated with elements in the DOM.  This association in called data binding.  REST is short for representational state transfer.   It means that the page is going to get its data via HTTP calls.  HTTP are a combination of the method and its URL.  Normally we use GET and POST methods.  REST uses HTTP methods: POST, GET, UPDATE and DELETE to mimic the four basic CRUD actions of a database: Create, Retrieve, Update and Delete.

This is a high-level way of looking at a web page.  It helps to think of the page in this manner to see where code and interaction should go.

Step One: Learn JavaScript

If you haven’t noticed yet, JavaScript has become the language to leverage in web development.  This can be seen in some very hot technology, such as: AngularJS, NodeJS, and D3JS.   Even tools like Bootstrap have JavaScript, and even Angular, components.

We are interested in learning JavaScript as if it was a programming language and not a widget to attach to a button.  We first need to get a version of JavaScript onto your system that you can interact with.  You can accomplish this by installing NodeJS.  It site is here.  NodeJS uses the Google v8 JavaScript engine.  This is the same engine in the chrome browser.

Once installed you should be able to run the node command, and you will receive an interactive prompt.  To get out of the interactive prompt, hot command-C twice.

Now to figure out what it type with that prompt go to Eloquent Javascript.  You can purchase this in book format from No Starch Press.

With a little JavaScript you can move forward.  But you should continue to learn JavaScript in order to be able to really take advantage of AngularJS.  Its JS for a reason.

Next we are going to create an environment on our system in order to start developing.

Trackbacks

  1. […] going.  Really, you can do it with installing NodeJS.  Now, if you already have done that because you went and learned JavaScript as in Step one, great. With NodeJS, we get node package manager (npm).  When developing in node, […]

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

%d bloggers like this: