View Asset Pipeline Integration

A short example on how to move you're views into the asset pipeline using HAML & Handlebars

Transcript

1. Asset Pipeline Integration Raphael Randschau w e l u s e G m b H Sunday, October 30, 11
2. current state Sunday, October 30, 11
3. our GOAL first visit Sunday, October 30, 11
4. our GOAL subsequent visits Sunday, October 30, 11
5. our GOAL view assembled on the client-side thin controllers fast page load times! less load! single-page application interesting things can be achieved: - 100% offline apps AppCache - Sunday, October 30, 11
6. welcome to the asset pipeline not build for view- construction write HTML yourself no Helper localization won’t do Sunday, October 30, 11
7. some problems rendering & templating engine ActionView::Helpers attribute binding localization authorization Sunday, October 30, 11
8. partial solutions haml_assets haml_handlebars_assets template engine Sunday, October 30, 11
9. partial solutions haml_assets haml_handlebars_assets = hbs_form_for :user do |f| = f.text_field :name template engine Sunday, October 30, 11
10. partial solutions haml_assets haml_handlebars_assets = hbs_form_for :user do |f| = f.text_field :name template engine Sunday, October 30, 11
11. partial solutions <form> <input type=”text” value=”{{name}}” /> </form> haml_assets haml_handlebars_assets = hbs_form_for :user do |f| = f.text_field :name template engine Sunday, October 30, 11
12. partial solutions Routes handlebars_routes_assets Sunday, October 30, 11
13. partial solutions r.edit_user_path Routes handlebars_routes_assets Sunday, October 30, 11
14. partial solutions r.edit_user_path Routes handlebars_routes_assets /users/{{id}}/edit Sunday, October 30, 11
15. partial solutions = hbs_form_for :user, action: r.edit_user_path, method: :put do |f| = f.text_field :name <form action=”/users/{{id}}/edit” method=”put”> <input type=”text” value=”{{name}}” /> </form> Sunday, October 30, 11
16. partial solutions t(:‘hello.world’) Localization jquery-localization-engine Sunday, October 30, 11
17. partial solutions t(:‘hello.world’) <span rel=”localize[hello.world]”> Hello World! </span> Localization jquery-localization-engine Sunday, October 30, 11
18. partial solutions t(:‘hello.world’) <span rel=”localize[hello.world]”> Hello World! </span> $("[rel*=localize]").localize("locales/de") Localization jquery-localization-engine Sunday, October 30, 11
19. partial solutions review HAML - rendering ActionView::Helpers handlebars templating dynamic localization Sunday, October 30, 11
20. partial solutions questions integrate I18n into FormHelpers ? authorization in the client? data-filter in the server? restore state when accessing URLs directly? Sunday, October 30, 11
21. samples https://github.com/leahpar/backbone-asset-pipeline-example http://nicolai86.eu Sunday, October 30, 11
22. Discussion Sunday, October 30, 11