REW Mobile

Used in this project

Ember, Rails, Node, Grunt, Bower, Ember App Kit, Yeoman, Ratchet, Google Maps Javascript API, Google Fusion Tables, SnapJS for sidemenus, GeocompleteJS, Geolocation in-browser, Handlebars, Underscore, Karma, QUnit, Web Components, Git, Engines, Bower-Rails


Work summary

Prototype and import into Rails engine

Dropped Yeoman for Ember App Kit (EAK), because didn't need generators and preferred EAK app structure.

Implemented side menu using SnapJS

Added a google maps view with fusion layer.

Added geolocation - show current location with a marker, and implement a "center map to my location" button.

An interesting problem was making sure we don't reinit the maps everytime we load it. Lots of issues with doing that - app doesn't appear responsive, location person was viewing gets reset every single time, etc. The reason the map had to be reinitialized every time was because Ember views get destroyed and replaced whenever a URL change happens. But found out this only happens for Outlets. So had to move map view/component into the application layout and decide when to show it based on which view was currently active.

Imported app from Ember-App-Kit into a Rails engine. Used bower-rails for managing client-side assets (except for ones that ember-rails and ember-source provide).

Laying out architecture

Trying to follow a state-centric approach.

Defined bookmarkable states and their necessary routes. Turns out we'll also need the queryparams feature from Ember 1.6.0.beta for better URL state. (It's hard to store all map state, search state without query params).

Basic Theming For Ratchet

Made it look less plain, and more like the mockups.

Process changes

Branching guidelines - used a simplified version of the git-flow model, with the intent to evolve the model as more complex workflows become necessary. Do not alter public commit history (e.g. by squashing and by force commits). Rather than squashing commits, use PRs to encapsulate and describe overall changes made by smaller commits.

Basic features

Search page, contact us page, top homes, loading screens, web components for different types of fields (e.g. plus/minus component, image components, location selector, toggles, navigation drawer, map, etc.). Integrating with API - writing custom adapters and serializers to massage data when API changes were not possible. Info bubbles on map. Added pagination and spinners to list view. Back buttons and history management. Speed improvements and optimizations (e.g. faster dropdowns on search page, resulting in 4-5x faster page loads).

Handling errors

Used Toastr JS library for notifications. This was used for client-side validation errors as well as for server-side errors.

Integration tests

Used QUnit on top of the Karma test runner. And wrote an integration test that tests user flow through the search page, and to the map and list views. Some interesting challenges with the run loop, which ended up happening because I was doing async stuff outside of Ember, and the run loop was turned off.