markojs-express-website
We are showing how to design highly customizable websites with MarkoJS.
Prerequisites
- NodeJS >= 8.10
To Start
npm install
npm start
To Start server with lassojs example
npm install
node src/app.js
Main concepts
Architecture
Component
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.
load-component
This loads component by name so we can simply pass the name of the component we want to load from components
load-slot
This loads component using slot information from the template.
Layout
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
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
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.