Master    Develop          

xtc – frontend development server and framework

This project provides an awesome server and framework for almost any frontend project. It is all about building and running web frontends – and making it easy, efficient and fun.

Hey, how would you like to build websites from clean, encapsulated modules that contain their markup, scripts, styles and even tests?

xtc implements Terrific.js' clever, yet simple frontend modularization pattern in Node.js and Express. It lets you use simple Handlebars syntax to construct pages from re-usable modules that you call in your templates. The modules encapsulate different areas of code, preventing collisions and make hassle-free collaboration possible.

xtc sets up Express and uses Grunt and Yeoman to take as much work away from you as possible. It automatically builds your assets and generates new modules for you. xtc projects can be deployed in a snap. All you have to do is code.

• # About Modules
• # Frontend Structure: Phases
• # Features
• # Quick Start
•    Documentation
•    Releases
• ⇗ Simple demo server on the demo branch.

About Modules

To include a module in a view or another module you simply write:

{{mod "example"}}

That is the shortest form. The module call can take many different options tough.

As mentioned earlier Terrific modules are self-contained Frontend components. A module basically is a folder with a structure like this:

my-module/
	my-module.hbs
	my-module-variation.hbs
	my-module.js
	my-module.less
	test/
		my-module.test.js
	skins/
		my-module-variation.js
		my-module-variation.less
	sprites/
		icon.png

This example is for a full-fledged module (including sprites). A module however can also just consist exclusively of markup or styling or logic.

A markup module is rendered in a wrapper.

<section class="mod mod-my-module">
	my-module's markup
</section>

The wrapper serves as an exclusive context or namespace for the module's DOM logic and and style sheets. A JS-only module can be applied "globally', i.e. to the whole page.

New modules can be generated with an interactive little CLI tool. You start it with:

npm run mkmod

Frontend Structure: Phases

The frontend code is structured into different phases.

• Inline immediate bootstrapping
• External concatenated [todo: ...into bundles]
  • Base
  • Modules
  • Application [under assessment]
• Async lazy loaded
  • Modules [todo]
  • Static assets

These phases are processed in separate build pipelines and used as separate resources in the browser.

Such.less CSS

By default xtc contains an extremely helpful CSS framework called ⇗ such.less. More details coming soon. Wow.

Features

• Light-weight, fast and hackable JavaScript backend
• Frontend modularization, modules are included by the server.
• Nice for single page apps.
• Handlebars templates.
• LessCSS 1.6.0
• Flexible automatic asset building using Grunt.js, with file watcher
• Automatic sprites generation
• External, inline (todo: and dynamically loaded assets)
• Automatic testing of the current page (todo: test automation in multiple browsers, simultaneously)
• Project setup takes minutes.
• Interactive generator for modules, skins and projects.
• Ready for deploying to Heroku, Digital Ocean or Nodejitsu.

Want more features? There are more.

• Can be used as a Terrific build tool in foreign frameworks that do their own Terrific module includes.
• Easy to configure. (Almost) everything in one place.
• The whole frontend is contained in one folder, called... frontend.
• Less @import (reference): Only includes what is actually used in your project. Great for libraries with mixins, helpers.
• Generated project overview lists all views, modules and layouts, with links to stand-alone, rendered source and repository.
• Lazy routing: just create a new view and use its filename as the URI.
• Helpful, friendly error messages if you do something wrong.
• Basic styles for wireframing.
• Filler text template helper Hipsum.js.
• Super-easy HTTP basic auth protection and access for IP ranges.

Quick Start

• Install Node.js.
• Open a terminal and execute npm install -g grunt-cli yo [email protected].
• In the terminal, change to the project folder and start the project generator: yo xtc.
• Start the dev build and file watcher: npm run build.
• Open a new terminal session and start the server with npm start.
• Now you can visit localhost:3000 in a browser.

That's it. Start building websites!

There's an extensive documentation to familiarize you with all aspects of xtc.