We are showing how to design highly customizable websites with MarkoJS.
- NodeJS >= 8.10
npm install
npm start
npm install
node src/app.js
Component is a plugable, configurable and custom HTML tag. It will be written in marko template syntax and it will have extension ".marko". Component is independent portion of the web page which upon execution generates some HTML and gets embedded into the page. We can use same component with several widgets to get different output.
In this project we will be writing our components in the components directory.
The following are special components using which we can load components dynamically based different use cases. Please note these themselves shouldn't be loaded dynamically else it will be a infinite loop.
This loads component by name so we can simply pass the name of the component we want to load from components
This loads component using slot information from the template.
Layout is the skeleton on the page using which we can define the structure of the page. It will be written in marko template syntax and it will have extension ".marko". Based on this entire page will be rendered. We can load it with different templates to get different output hence highly configurable.
In this project we will be writing our layouts in the layouts directory.
Widget is configuration for component, you can think component like function and widget like calling that component function with some arguments. We can have many widgets for same component by changing the attributes we want to pass to the component.
In this project we have given sample widgets but ideally these should be stored in the DB and fetched based on the configured template for the page.
Template is configuration for layout, you can think layout like function and template like calling that layout with some arguments. We can have many templates for same layout by changing the attributes we want to pass to the layout. Template also has widgetConfig to map slot names with widgets to be loaded, using this we can customize what widget want to load for the slots in the layouts.
In this project we have given sample templates but ideally these should be stored in the DB and fetched based on the page is being loaded.