Firefox Marketplace Frontend

Talk about Firefox Marketplace frontend architecture and the good parts.

Transcript

1. JOSEPH YEH May 2016 Frontend 1
2. OVERVIEW FRONTEND - Fireplace 2 BACKEND - Zamboni - Webpay, Solitude, Monolith...
3. FRONTEND 3 FIREPLACE - 2013 - jQuery, Underscore - RequireJS (AMD) - Nunjucks - Stylus - Makefile + Gulp
4. USAGE INSTALLATION 4 git clone git@github.com:mozilla/marketplace-template.git npm install make install DEVELOP make serve make build MKT_PORT=8000 make serve MKT_COMPILED=1 make build
5. FRAMEWORK GOALS: PERFORMANCE 5 - Everything client-side for less requests - RESTful APIs for everything - Always show something to the user - Cache as much as possible - Modular components and resuable code
6. FRAMEWORK 6 EVERYTHING CLIENT-SIDE 1. Data is requested from the API 2. The client receives the data 3. The client renders the page with the data 4. The client stores the data in its request cache
7. FRAMEWORK FETCHING AND RENDERING DATA - Defer Blocks 7 CACHING 1. Request Cache - Key-value store keyed by URL 2. Model Cache - Store specific object individually
8. PAGE BUILDING ROUTING 8 define('routes', ['core/router' ], function(router) { router.addRoutes([ {pattern: '^/$', view_name: 'hello_world' } ]); router.api.addRoutes({ 'hello-names' : '/api/v2/hello/names/' }); // Processors to set query arguments on API requests. // router.api.addProcessor(function(endpoint) { // return {something: 'to-be-in-the-query'}; // }); });
9. PAGE BUILDING VIEWS 9 define('views/hello_world', ['l10n', 'z'], function(l10n, z) { // -- MODULE LEVEL --. var gettext = l10n.gettext; z.page.on('click', 'button', function() { console.log('Put your delegated event handlers on this level.'); }); return function(builder) { // -- BUILDER LEVEL --. builder.z('title', gettext('My View Page Title')); builder.z('type', 'leaf'); builder.start('hello_world.html', { someContextVar: true }); }; });
10. PAGE BUILDING DEFER BLOCKS 10 {% defer (url=api('hello-names')) %} I just loaded {{ this.name }} from the `hello -names` endpoint. {% end %}
11. PAGE BUILDING DEFER BLOCKS - MODEL CACHE 11 {% defer (url=api('hello-names'), as='names', key='id') %} I just loaded {{ this.name }} from the `hello -names` endpoint. {% end %}
12. PAGE BUILDING DEFER BLOCKS - PLACEHOLDER 12 {% defer (url=api('hello-names')) %} I just loaded {{ this.name }} from the `hello -names` endpoint. {% placeholder %} This is what you see while the API is working away. {% end %}
13. PAGE BUILDING DEFER BLOCKS - EXCEPT 13 {% defer (url=api('hello-names')) %} I just loaded {{ this.name }} from the `hello -names` endpoint. {% except %} {% if error == 404 %} Not found {% elif error == 403 %} Not allowed {% else %} Error {% endif %} {% end %}
14. PAGE BUILDING DEFER BLOCKS - EMPTY 14 {% defer (url=api('hello-names')) %} <ul> {% for result in this %} <li>I just loaded {{ result.name }}.</li> {% endfor %} </ul> {% empty %} <div class="empty">Nothing was loaded. </div> {% end %}
15. PAGE BUILDING DEFER BLOCKS - PAGINATION 15 {% defer (url=api('hello-names'), paginate='ul.list') %} <ul class="list"> {% for result in this %} <li>I just loaded {{ result.name }}.</li> {% endfor %} </ul> <div class="load_more"> <button data-url="{{ api('this.meta.next_page') }}" >Load More</button> </div> {% end %}
16. CONCLUSION PROS - Defer Blocks - Cache - Deploy 16 CONS - Defer Blocks - Suitable for readonly website - Building Tools
17. REFERENCE http://marketplace-frontend.readthedocs.org/en/latest/index.html https://air.mozilla.org/building-the-firefox-marketplace/ 17
18. THANK YOU 18