Prototyping Ember Applications
Ryan Toronto
EmberJS Consulting
ryanto@gmail.com
ryanto.github.io
Start with URLs
If we were building project management software we would expect the following URLs
/projects
/projects/new
/projects/1
/projects/1/tasks/15
TurnIng URLs Into a Router
/projects
TurNing URLs into a Router
/projects/new
Turning URLs Into A Router
/projects/1
TURNING URLS INTO A Router
/projects/1/tasks/15
Turning URLs Into A Router
Final Router
Ember Conventions
Wow, Thats a Lot of Objects
We do not, and should not be, creating all all of those when building an application.
Ember makes smart assumptions based on our router and creates many of these objects for us with expected behavior.
Building The Projects Page
First we need a project model
Building The Projects Page
And a template
Building The Projects Page
It works!
Building The Projects PAge
But we have no projects to display :(
How Do we Add Projects
We could build a backend service...
But we won't because it takes too long to implement
And we are no longer prototyping an Ember app at that point
How Do we Add Projects
We could use /projects/new...
But we won't because any projects that were added that way would be would lost after each browser refresh
How Do We add Projects
We could fill the controller with dummy data...
But we won't because it mixes test data with code
How Do We Add Projects
We could use Ember Data's Fixture Adapter...
We will use Ember Data's Fixture Adapter
- Stores seed data
- Keeps tests data separate from code
- Acts just like your backend (queryable)
How To Use The fixture Adapter
DS.FixtureAdapter
How To Use The Fixture Adapter
Fixtures
Back To Projects
Have the ProjectsIndexRoute load all projects
And Now we Have A Projects Page
How The Fixture ADapter Works
Specific Records
How The Fixture Adapter Works
Collections
Custom Queries
Imagine you have a search api endpoint
/api/project.js?search=test
App.Project.find({ search: 'test' });
Query Fixtures
- fixtures: list of available fixtures
- query: hash given to find
- type: model class
Querying Fixtures
App.Project.find({ search: 'test' });
-
fixtures: App.Project.FIXTURES
- query: { search: 'test' }
- type: App.Project
Fixture Latency
By default Fixture Adapter simulates asynchrony
Fixture LAtency
Back To Projects
Now that we have an understanding of the Fixture Adapter lets build /projects/new
Template
projects/new
Controller
ProjectsNewController
Route
ProjectsNewRoute
Where we Are
Projects page that lists all projects
Easily query/search projects by name
Projects new page to create new projects
Following the patterns used to prototype the above we can quickly build out the rest of the application.
Back End API DEsign
STandard JSON Response
Switching To Production
becomes
And everything just works
Ryan Toronto
EmberJS Consulting
ryanto@gmail.com
ryanto.github.io
Example Projects Application
Prototyping Ember Applications
By ryanto