$30 off During Our Annual Pro Sale. View Details »

Angular, Rails, Require.js working in Harmony

sporto
July 25, 2013

Angular, Rails, Require.js working in Harmony

sporto

July 25, 2013
Tweet

More Decks by sporto

Other Decks in Programming

Transcript

  1. Angular,  Rails  and  Require.js  
    working  in  Harmony  
    Sebas:an  Porto  

    View Slide

  2. Page

    Our  app  
    Small core (libs
    + app code)

    Lots of code

    Precompiled  using  the  assets  
    pipeline  
    Loaded  on  demand  using  
    require.js  

    View Slide

  3. Angular  sweet  path  
    Load all
    application
    code

    Automatic
    bootstrap

    View Slide

  4. Angular  +  Require  
    Load
    application
    code using
    require.js

    Manual
    bootstrap

    View Slide

  5. Angular  +  Require  
    <br/>$(function () { <br/> requirejs([‘path/to/component’],<br/> function(main) { <br/> var $ele = $('#<%= view_id<br/>%>'); <br/> angular.bootstrap($ele,<br/>[‘APP’]); <br/> }); <br/>}); <br/>

    View Slide

  6. Components  
    Component  A  
    Component  B  

    View Slide

  7. Components  
    Component  B  
    Component  C  

    View Slide

  8. Components  
    Component A

    Component B

    Own  angular  
    code  
    Own  angular  
    code  

    View Slide

  9. Components  approach  1  
    FAIL!  Angular  tries  to  bootstrap  everything  
    and  cannot  find  the  code  
    Component A

    Sub component B

    Bootstrap A

    Bootstrap B

    View Slide

  10. Components  approach  2  
    requirejs([‘path/to/componentA’,
    path/to/componentB],
    function(main) {
    var $ele = $('#<%= view_id %>');
    angular.bootstrap($ele, [‘APP’]);
    });
    FAIL!  This  code  just  knows  too  much  
    Component A

    Sub component B

    Bootstrap A + B

    View Slide

  11. Our  components  approach  
    Component A

    Sub component B

    Bootstrap

    Temp
    storage in
    rails

    Tell  what  you  need  
    Tell  what  you  need  
    Ask  what  to  use  

    View Slide

  12. Our  component  defines  what  it  needs  
    <%  
     required_js  <<  ’/assets/…/form/main'  
     required_angular_modules  <<  'trading.gb_recycle_buys'  
     required_angular_modules  <<  'core.currencies'  
     
     view_id  =  new_view_id  
    %>  
    Component B
    Temp
    storage in
    rails

    Tell  what  you  need  

    View Slide

  13. Our  components  approach  
    <%= render ‘gb_recycle_buys/form/main' %>



    <%= render ‘events/list', eventable: transaction %>




    <%= render ‘shared/angular_bootstrap', view_id:
    view_id %>
    Add  a  
    component,  
    may  have  sub  
    components  
    Another  
    component  
    Bootstrap  
    everything  

    View Slide

  14. Bootstrap  everything  
    requirejs( <%= required_js.to_json.html_safe %>,
    function() {

    var $ele = $('#<%= view_id %>');

    angular.bootstrap($ele, <%=
    required_angular_modules.uniq.to_json.html_safe
    %>);

    });

    View Slide

  15. Feedback,  ques:ons  

    View Slide