JigMagga - MVC framework for large SEO sites

JigMagga project presentation on the 6th Node.js Meetup at lieferheld

Transcript

1. MVC framework for large SEO sites
2. Serving dynamic pages server side it’s so 90’s
3. Why serve a dynamic generated page when you can do the same with a static page much better?
4. Single-Page Application Backend Application SEO Optimized Best from three worlds JigMagga
5. HTML Workers Queues Backend JS App HTML Pages CDN API Browser JS Builder The Architecture
6. Results
7. JigMagga is a framework to build large widget based and configuration driven Isomorphic MVC JS Application.
8. It is build on top of the great framework stack from bitovi but replaces some core functionality and extend the awesomeness.
9. The main component of JigMagga is the HTML Worker.
10. The HTML Worker is a Node.js application with the purpose to generate pages from a configuration that describe the Jig’s in a page. This Jig’s include ejs and mustache templates that can be pre filled with data from an API for SEO engines or dynamically filled on execution time in the browser. The worker will also upload those pages into a CDN as well as listen for data changes on a RabbitMQ to consistently keep the pages update to date.
12. The HTML Worker is a Node.js application with the purpose to generate pages from a configuration that describe the Jig’s in a page. This Jig’s include ejs and mustache templates that can be pre filled with data from an API for SEO engines or dynamically filled on execution time in the browser. The worker will also upload those pages into a CDN as well as listen for data changes on a RabbitMQ to consistently keep the pages update to date.
13. Jig
14. What is a Jig? • its like a widget • MVC componente • composed of ◦ controller ◦ view(s) (ejs / mustache / stache) ◦ style(s) (css / less / scss) ◦ unit test ◦ test configuration
15. Page
16. Page Structure
17. A HTML Page <html> <body> <script src=”/steal/steal.js?dh/page/lieferheld.de/index”/> <section class=”dh-jig-header”></section> <div class=”dh-content”> <section class=”dh-jig-plz”></section> <section class=”dh-jig-seo”></section> </div> <section class=”dh-jig-footer”></section> </body> </html>
18. Configuration
19. How does a configuration look like? index.conf { "jigs": { ".dh-jig-seo": { "controller": "Dh.Jig.Seo", "template”: "//dh/jig/seo/views/init.mustache", "options": { "hideRatingsLink": true }, "prerender": true "apicalls": { "restaurant":{ "method": "get", "path”: "/restaurant/{restaurantId}" "resultSchema": "//dh/fixture/schema/restaurant.json", "requestSchema": "//dh/fixture/schema/restaurant.json" } } } } }
20. And what does the HTML Worker do? HTML Worker API RabbitMQ CDN JM conf HTML Page
22. Thank you! www.github.com/yourdelivery/JigMagga We are welcome for pull requests!