Angular, Rails, Require.js working in Harmony

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