This article is the fourth in a 5-day series about teaching beginners how to program. Read the introduction.
We're using a framework for the same reason we learned Bootstrap: it helps us achieve meaningful results quickly by embracing magic (for a more detailed rationale, check out the note on pedagogy from Day 2).
Frameworks are also, in a way, inevitable. The most experienced a programmer you become, the more good habits you develop, to save time and automate as many repetitive tasks as you can. Ultimately, you'll either invent your own framework and tools (which requires lots of time and mastery), or you'll start using the ones developed by your peers. It's a simple, logical progression.
Ember has so much automation built into it that a basic application can be developed with very little actual code. The framework makes intelligent guesses about the things you've left out, and if you follow the default path, a great deal of the work is done for you. This is in line with our mantra: getting results is more important than understanding how. Embrace magic.
One of the big reasons I endorsed CouchDB was because of its emphasis on HTTP and REST. I believe it's extremely important for web developers to understand these concepts, and URLs are at the core of both. Ember was built with URLs at its centre, so every state of your application can be represented by a unique URL. In fact, the first thing you do when building an application is defining all these URLs, which is a great exercise to help you map out your project.
This focus on URLs reinforces the importance of REST (Representational State Transfer) in web development, and makes Ember that much more closely aligned with the various server-side frameworks (Rails, Django, CodeIgniter, etc.) you might encounter in the future.
These four concepts are the fundamental building blocks of object oriented programming, that you'll encounter in C++, Java, PHP, and pretty much all the well-known contemporary languages. Ember provides a framework that helps demonstrate and explain these concepts while building cool stuff quickly.
Important note: NEVER use the terms 'inheritance', 'polymorphism', 'encapsulation' or 'abstraction' with students. You'll scare them off, and they don't need to know about them explicitly. Let them do their thing, and get comfortable applying these concepts without knowing that they are. It'll be our little secret.
Ember's core team has prolific open-source developers with a diverse range of experience behind them. This experience is reflected in the decisions they are making today, and the direction that Ember is headed. As the web continues to evolve, it's important to know that your framework is being steered by people who are actively involved in this evolution. Like CouchDB, Ember is skating to where the puck will be.
The goal of this unit of study is to introduce learners to more advanced programming techniques, using an object-oriented approach and an MVC framework. At this point, students should know how to build a front-end interface and link it to a database using AJAX. This is a pretty good skill-set for basic websites and web applications, but it quickly becomes unmanageable when you want to build something more complex. The more "states" your application can have, the more carefully you need to plan so that the right controls are available at the right time. Once students come up against these limitations, it's time to graduate to a framework.
To find a hook into this unit, consider finding some samples of really polished web applications, and speculate about how they might have been built. What would the database fields have to look like for each kind of item? How do the buttons respond when clicked? How does everything happen so quickly, without reloading the page? When do AJAX calls happen? As you ask these questions, you'll help students articulate and define the limitations of what they can currently build.
Now, show them how to overcome these limitations.
A beginner's exercise to introduce some basic features of Ember would be to create a simple, three-page website. Nothing special, no forms or database interactions yet. Just a simple, static website with 3 links to different sections. Have students model this website using Ember's approach: define the application, define the 3 routes, the application template, and the 3 corresponding page templates.
Students should immediately begin to see one of Ember's value propositions: instead of creating 3 HTML files and linking them all together by copying and pasting a navigation bar, they can write the entire website on a single page, and rely on Ember to respond to clicks, load new content instantly, and even change the URL. They may also notice that they only needed to write the navigation bar once, in the application template. As the page contents change with each new section, the navigation bar stays the same, and the page never needs to refresh.
For an intermediate exercise, students might try and re-create one of their previous web applications from Day 2, but using the Ember framework to reduce the amount of code they need to write. This will reveal the areas where they still need to grow, like action handlers, Handlebars templates, model hooks and state management. Students may need to remain at this stage for a while, and it's a good opportunity for group-work, as many students will find that they're trying to solve similar problems. That's okay - there should always be time for collaboration and exchanging ideas. Vygotsky might even call these opportunities zones of proximal development.
Finally, as an advanced exercise, challenge students to create an Ember application that can list items from a database, display those items individually, and edit & save them back to the database. This will require learners to define nested routes (e.g. /posts , /post/hello , /post/hello/edit), initiate a model with data from a database (using AJAX inside Ember controllers), and create interface templates that can trigger actions when buttons are clicked.
Like CouchDB and pretty much every other technology we've covered, Ember is a rabbit hole unto itself. You could spend months on this one topic and still learn how to do new things, and it's entirely up to you how in-depth you care to go. However, the bare minimum that students should learn before moving on to Day 5 is how to create an Ember application that can fetch data from a database, display it, edit it, and save it back to the database. If they've mastered the skills required to meet this outcome, they have an excellent foundation in front-end development, databases, and object-oriented programming.
Congratulations, your students are now highly employable. But, there's still plenty more to learn about programming. We'll catch a glimpse of this tomorrow.
Stop breaking the web
This video features one of the EmberJS founders, Tom Dale, speaking about what the is trying to accomplish. It provides some great insights into the project's values and priorities, and highlights many of the framework's strengths.
A step-by-step guide to building your first EmberJS app
A good introduction for intermediate programmers. This tutorial, along with some other screencasts, tutorials, articles and example code, will help learners understand how to structure their Ember projects.
The official guides on the Ember website, which start by taking you through building an example ToDo application. Consider assigning this tutorial to students to follow along. The Ember website also has a great introductory video screencast for newcomers, featuring Tom Dale (again).
Ember and the future of the web
Brandon Hays expands on some of the reasons behind why I've selected Ember for this course of study. He makes some excellent, insightful observations about client side frameworks versus server-side frameworks. He also explains how the Ember team is skating to where the puck will be.
Warming Up With Ember (Codeschool)
While the entire course isn't free, students can try out the first part of this course without paying. Codeschool courses feature great screencasts and interactive practical assignments that give very good feedback.