Rails Frontend Optimisations (part 1)

Optimise your client side performance the right way

Transcript

1. RAILS FRONTEND OPTIMISATIONS PART 1
2. THE BROWSER IS IMPORTANT TOO
3. KEEP YOUR ASSETS IN THE RIGHT PLACE
4. KEEP YOUR ASSETS IN THE RIGHT PLACE THIRD PARTY ASSETS APP OWN ASSETS
5. A THIRD-PARTY SOFTWARE COMPONENT IS A REUSABLE SOFTWARE COMPONENT DEVELOPED TO BE EITHER FREELY DISTRIBUTED OR SOLD BY AN ENTITY OTHER THAN THE ORIGINAL VENDOR OF THE DEVELOPMENT PLATFORM. Wikipedia, Third-party software component
6. DO NOT EMBED JAVASCRIPT IN YOUR VIEWS
7. WHAT IF I NEED TO RUN VIEW-SPECIFIC SCRIPTS?
8. ASK FOR UNIQUE ELEMENTS OR ATTRIBUTES if ($(‘#unique-element-id’).length > 0) { } if (document.getElementById(‘#unique-element-id’)) { } body data-controller=params[:controller] data-action=params[:action] var currentPage = document.getElementsByTagName(‘body')[0].dataset; if (currentPage.controller === ‘pages’) { }
9. AVOID THE MESSY JAVASCRIPT USING DATA ATTRIBUTES .card*{'data-url'=>place_path(place), 'data-id'=>place.id} = place.name <div class="card" data-id="1234" data-url="/place/1234">Slim's house</div> .card *method_which_returns_hash = place.name .card *@hash_instance_variable = place.name var attributes = document.getElementById(‘id’).dataset; attributes.url; attributes.id;
10. RAILS PRECOMPILES ALL YOUR FILES INTO A SINGLE ONE = javascript_include_tag 'application'
11. NO MORE HTTP REQUESTS
12. WHAT ABOUT SOME PERFORMANCE TIPS?
13. YOU DON’T NEED JQUERY $(‘#unique-element-id’); document.getElementById(‘unique-element-id’);
14. YOU DON’T NEED JQUERY $(‘#unique-element-id’); document.getElementById(‘unique-element-id’); $(‘.ultra-repeated-class > div + span input[type=email]’); var a = document.querySelectorAll(‘.ultra-repeated-class > div input[type=email]’); Array.prototype.forEach.call(a, function (elem, idx) { // some logic });
15. YOU DON’T NEED JQUERY $(‘.class-name’).on(‘click’, function (e) {}); $(document).on(‘click’, ‘.class-name’, function (e) {}); // IE9+ document.addEventListener(‘click’, function (e) { if (Array.prototype.indexOf(e.target, ‘class-name’) >= 0) { } })
16. Use Event Observer pattern If possible use Vanilla Javascript Don’t embed javascript in views Use bower Put your assets where they belong