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

Q&A