Question

We’re impressed with the integration and best practices that BoilerplateJS provides but the documentation is definitely lacking, especially for new RequireJS users.

We’re a team of 5, each with different skill sets and one of the attractive points of BoilerplateJS is the ability to isolate UI components.

From the sample scaffolding, it’s clear how we can unit-test each component separately. However, we’re unclear how we can do this during development:

1. Developer A creates component structure and view model (tested) and passes it to Developer B
2. Developer B develops CSS and possibly animation for the component
3. Developer A and/or B integrate the component into the rest of the website and further test integration

How is it possible to achieve (2)? i.e. allow designers and developers to work on an isolated component – what is the recommended way to load the component so it can developed/debugged/tested?

Answer 1

About CSS

A UI component has roughly 3 parts: Structure (HTML), Presentation (CSS), Behavior (JS). A common way of handling is developers focusing on the Structure and Logic where designers work on the presentation.

This is how we developed the sample application of boilerplatejs. For example, the Menu, Theme and Localization components were developed by developers as a simple ‘unordered lists’ which looked like below exactly when they completed it (just delete the theme css link via Chrome Developer Tools and you will see the same):

Then designers took the ugly UI and created a theme that position and render these lists in a professional manner (we developed 2 themes stored at src/modules/baseModule/theme). It is of course hard for the developers to just deliver something that ugly, but they need to trust the ability of the designers to do their job. I’m sure you use a source control tool that allows different team members to work on the same component even simultaneously.

If you want the theming to be a prominent feature, I recommend minimizing component specific CSS files. Otherwise you might not be able to create different themes that completely changes the layout and look-n-feel of your components. Downside of not having component local css is the fact that components are not really self contained without ‘presentation’. I’m still struggling to answer this question properly, any ideas/help is appreciated! See my related question on this below:

global CSS theming combination with component specific local stylesheets

Anyway there are several ways you may add CSS to your components, have a look at this question where these different ways are discussed.

Adding external CSS file to a BoilerplateJS project

Now about embedding components…

If you want the components embedded in to some other webpage, you can use the DOMController of boilerplate for that. For example, lets say you need to embed the ‘departments (src/modules/sampleModule1/departments)’ component to some other website. You will have to add a DomController in addition to already existing UrlController (UrlController respond to browser URL changes) to the module (src/modules/sampleModule1/module.js).

    //crate a dom controller that searchs within whole document body
    var domController = new Boiler.DomController($("body"));
    domController.addRoutes({
        //look for elements with id 'department_comp' and embed the department component
        '#department_comp' : new DepartmentComponent(context),
    });
    domController.start();

Now on your webpage or on external site place a div or a section element for the DomController to embed department.

<section id="department_comp"></section>

Of course there are two things you need to take care of:

1) Your web page needs to have boilerplatejs runtime in it. This means all your third party JS libraries and theme CSS file should be statically added to the web page. (We are working around this, with v0.2-stable we expect to release a bootstrapper that can do all that with a single script declaration)

2) If your component uses JSON services from a different domain, you will have to address cross domain HTTP requests either with JSONp or CORS. But if your REST services are hosted on the same domain, you dont have to worry about this.