Get Involved:

JavaScript &

Single Page Web Apps

Who am I

Caleb Gilbert

http://rocketmodule.com

http://scrapegrid.com (not officially launched, but up there anyway)

So...who is this presentation for

and what are our objectives?

First let's make sure we're speaking the same language:

Single Page Apps

"A single-page application (SPA)...is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application." - Wikipedia

Why Single Page Apps?

Provides a desktop-like experience (e.g., no page loads)

Speed and Bandwidth advantages

Differentiate your site/product from your competition

Increasingly the direction of web technology *

* with a caveat

Why Not Single Page Apps?

Given the current state of pre-package SPA technology,

it may be complete overkill for many things.

As always - the right tools, for the right job.

Frequently just certain parts/features of a site needs to be an SPA. Stay open the idea of a hybrid solution.

Getting More Involved

First things first: the DOM

If you don't know what the "document object model" is spend some time familiarizing yourself.

The basics:

1. Web-browsers parse HTML and CSS to create an in-memory object tree

2. The DOM is a standards-based API browsers offer to interact with the object tree

3. JavaScript is a popular language used to manipulate the object tree via the DOM API

Links:

http://www.w3.org/TR/DOM-Level-2-Core/introduction.html

http://www.youtube.com/watch?v=URF2sVQWuxU

http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/

Special mention: DOM Events

DOM events are the primary mechanism that JavaScript hooks into to provide 'real-time' interactivity.

Links

http://coding.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/

http://bitovi.com/blog/2010/10/a-crash-course-in-how-dom-events-work.html

Learning JavaScript?

Get a jumpstart with a quick online education:

http://www.codecademy.com/tracks/javascript

https://www.codeschool.com/paths/javascript

https://www.udemy.com/beginning-javascript/

http://www.lynda.com/JavaScript-training-tutorials/244-0.html

Next steps to JS and SPA zen

Learn on a 'real' projects (even little ones)

Don't get hung up on which MV* JS framework to use

(or even whether to use one at all)

Plan for iteration in your approach rather than initial perfection

Start tinkering with some JS MV* frameworks (wait, what?)

SPA and JavaScript links:

http://reddit.com/r/javascript

https://news.ycombinator.com/

https://github.com/trending?l=javascript