web-twins

The core source code of Web-Twins

Travis CI status:

Development Structure Figure

Purpose

This framework want to give engineers a simplest framework for their development. We will remove the technical gap between the backend engineers and the frontend engineers.

Within Web-Twins, all Frontend engineer should only modify the Templates,CSS,JavaScript and commit these files, then everything will be finished. Backend engineers don't need to spend any time integrating these templates. This will be a perfect way for developing a website.

What is Web-Twins meanning?

Twins mean that it will be exist two websites, one is the Template mode website and another is the Real mode website. These two websites can switch to each other at any time. After you modify the source code in the Template Mode, the Real mode will look like the same with Template Mode immedidately.

We suggest frontend engineer to use Node.js to develop the websites for Template mode. Use Nodejs and NPM to install this framework and double click the file called server.js. It will quickly create a web server. You don't need to worry about the installation of web service, just focus on tempalte development.

A template mode example: https://github.com/Web-Twins/Web-Twins-JS

Key-Wins

• Connection: Web-Twins has two data format JSON and YAML. Web-Twins use the MVC design pattern to connect the backend and frontend program.
• Independent: Backend engineers can focus on programming without worrying about frontend HTML code or what CSS/JS should be loaded. Frontend enginners can also focus on template development.
• Switching: We can switch Template Mode and Real Mode to compare the difference, also backend engineer can switch t he web page to template mode seeing what is the original UI design of Frontend engineer. This will clarify the Frontend requirements for the programming integrator.
• Debugging: Using JSON or YAML data to decide the responsibility of bug should belong to Backend or Frontend.
• Bulit-In Frontend Skill: CSS/JS combination, Image Sprite, Less/Sass/Scss, Handlebar, Jade.
• Modularization: Separate the web page to become some small modules. Every module is a a MVC structrue including model, view and CSS/JS files. The web page will automatically load CSS/JS files of modueles.

Infrastructure Design of web-twins

The framework will give what to you

• MVC: A MVC framework for front-end and back-end engineers.
• Modularization: Modularize the website pages.
• Support Nodejs and PHP. You can use Nodejs or PHP to build a MVC website, also you can use both of them if you want.
• Shorten the time of program integration.
• To easily simulate any situation which end-user will meet and quickly to find a root cause.
• Support Desktop and Mobile web.
• Switch between template mode and website mode.

Directory Structure

| - core
| -- nodejs
| ---- layoutParser.js
| ---- module.js
| ---- server.js
| ---- util.js
| -- php
| - tests

layoutParser.js:
This object support to parse the XML config of page then render the result of HTML.

The following are the features of layouerParser:

• Parse the XML config. We have two kind of XML config, one is the definition of pages, another is the definietion of whole website.
• Render CSS on the head and footer. Also directly compile the less file.
• Render JavaScript on the head and footer.
• Render HTML body.
• Redner Module HTML by calling module object render.
• Automatically Combine the CSS and JavaScript file list.

module.js:
This object support to parse the tag module then render the module's HTML. A module is a little like the MVC structure. But it includes the view and model without controller. We could define multi models for template mode development. The format of model is a JSON or YAML. The development of view is a handlebar template, The module.js can compile the templates and parse the models and combine this two kind of data to become a HTML. In the future, We will support more kind of templates.

CSS/JavaScript

• Combination

Web-Twins support the combo of CSS/JS to improve the frontend performace.

Attention!
Take care of the relative image path in css, if you use the combination of CSS, be sure the combo url path has the same level with separated CSS file path.

• Less and Sass/Scaa

Web-Twins support less and sass/scss.

Attention for development!

• You should set head tag in page config, or the setting of head in site config will not be rendered.