# How To Start A DoneJS Project

**URL:** <https://forums.bitovi.com/t/how-to-start-a-donejs-project/262>\
**Category:** DoneJS\
**Created:** [May 10, 2016, 5:56pm UTC](https://forums.bitovi.com/t/how-to-start-a-donejs-project/262 "2016-05-10T17:56:54Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![leoj3n](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/leoj3n/32/174_2.png) [@leoj3n](https://forums.bitovi.com/u/leoj3n)\
**Post date:** [May 10, 2016, 5:56pm UTC](https://forums.bitovi.com/t/how-to-start-a-donejs-project/262/1 "2016-05-10T17:56:54Z")

</div>

> <https://gist.github.com/leoj3n/029cb44caeca6cdc669bb951cd6d00b8>

---

<div class="post-metadata">

**Author:** ![leoj3n](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/leoj3n/32/174_2.png) [@leoj3n](https://forums.bitovi.com/u/leoj3n)\
**Post date:** [June 1, 2016, 3:03am UTC](https://forums.bitovi.com/t/how-to-start-a-donejs-project/262/2 "2016-06-01T03:03:07Z")

</div>

I have added a section to the guide linked to above that explains how to work with sass and Bootstrap 4 when using DoneJS.

> By default DoneJS projects utilize less via the a less compiler engine that runs on the client side. This is probably not optimal, to be compiling our CSS on the client side. Also, if you want to use the new version 4 of Bootstrap, you will need to compile scss not less files.

Hope that helps someone!

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [June 1, 2016, 3:14am UTC](https://forums.bitovi.com/t/how-to-start-a-donejs-project/262/3 "2016-06-01T03:14:49Z")

</div>

Thanks for the update!

Assuming that live-reload is working fine, compiling less on the client is actually optimal over the course of many changes.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [June 1, 2016, 3:17am UTC](https://forums.bitovi.com/t/how-to-start-a-donejs-project/262/4 "2016-06-01T03:17:20Z")

</div>

One more thought, the ability for a module to contain its own styles and be able to load them is really important for making small/isolated components and sticking to the modlet pattern.

If you start having a different lifecycle for styles vs code, that can hurt a project in the long run.

---

<div class="post-metadata">

**Author:** ![leoj3n](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/leoj3n/32/174_2.png) [@leoj3n](https://forums.bitovi.com/u/leoj3n)\
**Post date:** [June 1, 2016, 4:27am UTC](https://forums.bitovi.com/t/how-to-start-a-donejs-project/262/5 "2016-06-01T04:27:12Z")

</div>

Totally agree with you on modlets, and I will continue to use LESS in the modlets. However, I am basing this guide off the place-my-order guide which has the separate repo for the assets (bootstrap, images, _and_ custom style declarations). Bootstrap 4 requires Sass, and the steal-sass plugin is not performant (actually, it fails to resolve @imports).

I can theorize, but I don’t know why compiling on the client is optimal, if you wouldn’t mind explaining why? At least for Sass there are different compilers made for performance reasons f.ex. the original in Ruby and the much faster C/C++ implementation libsass, but sass.js is the slowest of them all (even the maintainer says use the any other compiler unless you absolutely _must_ use sass.js to compile in the browser).

So, I think if you want to use Bootstrap 4 and Sass, this is probably the best way for now.

I really am curious about the details of why it’s actually optimal to compile less on the client over the course of many changes. Is it because of optimizations that can be done in-flight, spreading workload, or perhaps avoiding the overhead of reloading a compiled CSS file? Hope you can explain that!

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [June 1, 2016, 1:54pm UTC](https://forums.bitovi.com/t/how-to-start-a-donejs-project/262/6 "2016-06-01T13:54:02Z")

</div>

It’s basically the benefits of hot module swapping. Assuming you have many sass files, if one of them changes, we only have to reload that one file that changed recompile just it (and any parent modules).

If you change `mymodule/mymodule.scss`, the client downloads that, re-compiles it, and updates the DOM accordingly.

If you do this server-side, you could setup a similar hot-module swapping server, but even with that, you’d still be transporting the full css output everytime.

All of this is certainly true with JavaScript, which is why I said

> Assuming that live-reload is working fine,

I’m not sure how great our live-reload works with scss as I’ve not used them together on a project (others in Bitovi have). A lot depends on how scss compiles source files. Someone like @RyanWheale or @matthewp would know more about this. I know that in a good system, hot-module swapping in the client should be generally faster than a server-side equivalent. I’m just not confident SCSS is something we can make (or have made) operate in the same way JavaScript dependencies operate.

---

<div class="post-metadata">

**Author:** ![leoj3n](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/leoj3n/32/174_2.png) [@leoj3n](https://forums.bitovi.com/u/leoj3n)\
**Post date:** [June 2, 2016, 12:03am UTC](https://forums.bitovi.com/t/how-to-start-a-donejs-project/262/7 "2016-06-02T00:03:12Z")

</div>

That sounds pretty slick, if I’m grokking everything right! So, let me try and get this straight…

If I have some components, let’s say `foobar.component`:

```auto
<can-component tag="app-foobar">
  <can-import from="my-app/same.less!" />
  <template>
    <p>Foobar!</p>
  </template>
</can-component>

```

And `batman.component`:

```auto
<can-component tag="app-batman">
  <can-import from="my-app/same.less!" /> <!-- loading same.less again -->
  <template>
    <p>Batman!</p>
  </template>
</can-component>

```

That are used in `index.stache` like so:

```auto
<html>
  <head>
    <title>{{title}}</title>
  </head>
  <body>
    <can-import from="my-app/app" export-as="viewModel" />
    <can-import from="my-app/foobar.component" />
    <can-import from="my-app/batman.component" />
    
   {{#switch page}}
      {{#case "home"}}
        <app-foobar/>
        <app-foobar/>
        <app-batman/>
        <app-batman/>
      {{/case}}
      {{#case "away"}}
        <app-foobar/>
        <app-batman/>
      {{/case}}
    {{/switch}}
  </body>
</html>

```

Then in **production** , DoneJS would bundle the compiled CSS with the respective `foobar` and `batman` components, and intelligently inject that CSS when a component is used (like `<app-foobar/>`)…

However, I’ve outlined a questionable situation in the example above, and I’m curious about how it would be handled (more specifically, I want to know if the CSS would be loaded more than just once).

So, considering that `foobar` and `batman` both `can-import` the same less file, would that CSS be loaded twice when `foobar` and `batman` are used on the same page?

What about when one component is used twice in a row?

What about when changing pages that contain the same component that was on the previous “page”?

It’s also possible that I’ve misunderstood **production** , and really all CSS is just globbed together in one big file (non-redundantly?), and there’s no injection of CSS going on. I see in the in-depth guide for `place-my-order`, it says:

> the restaurant list page’s JavaScript and CSS will only be loaded when the user visits that page.

Thanks if you can give any insight as to how this system pans out under the hood!

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [June 2, 2016, 4:55pm UTC](https://forums.bitovi.com/t/how-to-start-a-donejs-project/262/8 "2016-06-02T16:55:03Z")

</div>

> [@leoj3n](#):
>
> So, considering that foobar and batman both can-import the same less file, would that CSS be loaded twice when foobar and batman are used on the same page?

No, only once. Steal will resolve these to be the same module and execute (load it) only once. This is the same way RequireJS, Node.js and every JavaScript loader I’m aware of works.