Lets take the typical web development process:

A sketch is created for some idea. A designer may transform this into PSD's for the app/site. Development starts by splitting the design into HTML, CSS and JavaScript layers which are further developed as three separate, but very inter-connected subprojects.

Stark changes this process: you build the app or site out of small components that encapsulate HTML/template, CSS and JavaScript parts. The components depend on each other. Stark does the rest.

Building a web project this way reduces complexity: the number of interconnected layers / dependency trees a developer has to keep in mind. The components (although consisting of parts in different languages) have very high cohesion and reduce coupling. They visually map to what one sees on the screen in the final result.

You may notice that the idea is very similar to Web Components. However there are some differences:

• you don't have to wait for browser support,
• expressive syntax,
• more goodies built into Stark (YAML parts, development server, React support, etc.)

How Multi-Part Components work

• Stark treats multiple files with the same basename but different extensions as parts of the same component.
• There is also a special file format (*.mpc) for having all parts in the same file.
• You can freely combine *.mpc and other files.

MPC file contents look like this:

--- html ---
 
<!-- Note: empty lines between part content and header are mandatory. -->
 
--- css ---
 
/* You can add as many minuses at the end of header as you like: */
 
--- js --------------------------------------------------------
 
/// Tip: use comments to further structure your code. ---------

Components can depend on each other. This is expressed in their requirement part:

--- requirements ---
 
jquery/dist/jquery
Widget2:    ./widget2

Stark builds a single dependency graph from these requirements (starting from index.mpc file) and generates HTML, CSS, JavaScript files for your app or site.