July 26, 2011 Zerek Welz
The Basics - What you need to know before starting
- All applications are abut information
- What sorts of information can we deal with?
- How do we deal with that information?
- What is the content of the application?
Variables and Types
Variables are a container for information
- Undefined - no value right now
- Null - no value at all
- Objects - Similar to hashes, associative arrays or dictionaries from other languages. Collections of properties.
- Arrays - Special object similar to array structures in other languages. Also similar to Objects. They are not typed and zero-indexed.
Using HTML/CSS create a simple interface to make it easy to gather information from our users. We can store this information in data structures that make sense for our application.
Settlers - http://github.com/brianarn/ScoreSettler
- Application for tracking dice rolls
- HTML used as placeholders for future information
- CSS transistions are leveraged where possible
- Using the DOMContentLoaded eventListener set up a number of variables by selecting DOM nodes by their ID
- Using innerHTML to set the DOM Nodes to the correct info for showing to the end user
Twiffy.js - https://github.com/teampoop/Twiffy.js
Using a technique known as JSON-P we can retrieve info from third party services like Twitter, Flickr and then do something with that information. The Twitter API allows us to search, read and write tweets.
- App is search only
- Pulling in jQuery from jQuery CDN
- dev.twitter.com/apps - where to register your own Twitter app
- Registering our app allows more actions through the API
- APIs will change
- The better the documentation the more reliable the service
- Twitter, Flickr: good
- Facebook, yFrog: bad
- A good API change degrades well, i.e. Twitter still acknowledges xAuth despite the API not preferring that method any longer.
- Application has an input to get the search from the user
- 'console.debug' is your friend. Prints out the contents of JSON objects.
The Advanced Stuff
- JS libraries can simplify your code quite a bit.
- jQuery does facilitate binding info to DOM nodes but it can be difficult to scale well.
- The number of jQuery tutorials and plugins is as vast and varied as the quality from the fantastic and amazing to painful
- Google closure
- sencha (ExtJS)
- Offers up features that aren't in the browser by default
- Package management
- Cross browser UI with consistent look and feel
- Allows for modular application development
- Can feel like a higher learning curve
- A simple application by Rebecca Murphey to demonstrate an MVC (Model View Controller) approach
Summary - What does it all MEAN?!
If you want to learn more about Dojo come to Brian's Dojo class in October!
Rate Our Speakers
If you attended the event and have not yet rated our speakers, please head over to SpeakerRate and let Mark Casias and Brian Arnold know you what thought.
Your input and feedback are essential for helping Webuquerque provide the best content possible. Be sure to tell us what you thought!
Video of the presentation is available on Vimeo:
The slide deck is available on SlideShare:
Photos are available on Flickr:
Thanks to All Our Volunteers!
Webuquerque just wouldn't be the same without helping hands from our community members:
Want to help? Let us know if you'd like to lend a hand. Interested in speaking? Let us know that too!
Stay Tuned for Our Next Event!
For our August 3 event, Sean McCracken will discuss how to make a basic 3D game optimized for mobile using Unity 3D:
- 3D art requirements
- The scripting layer
- The Unity3D IDE
Let Us Know What You Think
As always, we want to know what's on your mind so we can do the best to ensure Webuquerque is all you want it to be. Make sure to let us know if you have any suggestions, comments or complaints.