Friend Me
 Follow Me
 Feed Me
a blog by ken pardue

Archive for April, 2012

Wrapping my head around Ember.js.

Tuesday, April 17th, 2012

So, I’m a PHP scripter that hasn’t done a lot of coding in a while. I’ve done some, but not a lot, of JavaScript, and college was, well, let’s just leave it at lacking in formal programming education. It seems pretty clear that the next step in responsive web applications is to run the entire app on the client side, only communicating with the server to download the application file and subsequent database communication. I get that. I also like what I’ve read about Ember.js and its approach to solving these problems (but I’m open to other solutions, too).

I’ve read the information on the Ember.js home page, and I get most of it (I think), but what I’m lacking is knowledge about how to structure my app as I start developing a slightly more complex site/app. There’s so many different ways people are solving problems that there’s no single this-is-how-you-get-from-point-a-to-a-functional-web-app guide. And if there were, I’m sure they would assume that I have knowledge about structuring MVC apps and advanced JavaScript to get there.

So here’s where I’d like to go with Ember.js: I want an app that has two main templates: one for user login which is served up initially, and one to house the rest of the app after logging in. After logging in, I want a main navigation pane that controls/changes out content in another pane (eventually based on user permissions, but I’ll start with just having it work).

How should I structure my app?  Here’s what Ember.js provides out of the box in their starter kit:

So, do all of my models, views, and controllers for the entire app go into app.’s?  If so, how do I structure those components inside the file so that they are easy to navigate?  How should I keep them organized, by components, or by keeping all models together, views together, etc?  If not, how do I load the separate components?  Should I have folders for models, views, and controllers?  If that’s the case, how do I load them?  Do I have a giant list of <script src=* elements in my index.html page?

As I’m planning out my components,  I’m assuming that something like this would be what I need to do:

If I’m understanding this right, I would have an appController that would launch when the application first begins.  It would have a loggedIn property.  I would set an observer on that property such that if it were false, I would do a view.append() a login template to the Site Handlebars Template.  Otherwise, I would view.remove() the login template, and view.append() the main page template.  The main page view would contain a Navigation view that would never change, but itself controls what shows up in the Content View.  It would load whatever template is associated with the Component Button that is active, and each template would have its own models, views, and controllers for the functionality associated with it.  (how do I load in the extra templates and their associated models, views, and controllers?)

Is that anywhere near a correct big picture view?  How on earth do I structure the files and code associated with that?  I’m sure state charts play some sort of a role here, but I have no idea how to plan them out and implement them.  I’m encouraged that they appear to be built into ember.js now, according to the website, because there’s so much new material to learn here I’d rather focus on what’s available out of the box rather than how to do my task with a half dozen different frameworks or components.

In addition to structuring the app know I still have to learn the process of writing a RESTful back end, another huge learning task in itself, but I’m okay for the time being just using fixture data.  Heck, even if I used more traditional methods for developing the components I’d be okay; I’d just really like the responsiveness of an interface like the above that’s super fast.