0

Let's say I want to make a new framework that consists of HTML components. My project structure would be something like this:

/components
../dialog
../../css
../../js
../../html
../textfield
../../css
../../js
../../html

I need some technology to run such project that will give me:

  • instant browser reloads/hot code pushes
  • less/sass support
  • template engine like handlebars, so for each component I don't need to import all my css and write html head tags

So basically I need something that works like codepen.io but with the power of my IDE (I use webstorm)

What I tried:

  • ExpressJs - I don't like the fact I should define routes for every component, also still can not configure it with any hot push packages: nodemon, node-supervisor - they reload app, but not page in the chrome.
  • Ember - requires and generates a lot of temp code, that causes my 8gb ram computer run slow, since my IDE tries to index all of node_modules. I know it could be configurated, but no other advantages too.
  • Angular - also a lot of steps I should do after creating new component files - imports and so on.
  • Meteor - one of the best solutions so far, but it has full tech stack - client & server. Reloads a little bit slow. Aslo I know exactly that it can not be used with Chrome Dev Tools Workspaces, to edit css instantly from console and save to disk, this feature I dream on.

To avoid any confusion. As a result I want to provide users with css/less/sass and html/jade/... It should not be like web components: Polymer or React

Community
  • 1
  • 1
ZuzEL
  • 12,768
  • 8
  • 47
  • 68
  • Take a look at [gulp](http://gulpjs.com/) to automate the sass compiling. Depending on how you write your gulpfile, could refresh the page whenever you save. Sorry I can't be of more help. – kirkpatt Sep 02 '15 at 17:22
  • Thank you Taylor, I will try gulp! – ZuzEL Sep 02 '15 at 17:33
  • @TaylorKirkpatrick I tried gulp and absolutely happy with it. BrowserSync is exactly what I wanted, and gulp gives me perfect control of how I want my files to be served to browser. Thank you! You can write it as an answer and I will accept it – ZuzEL Sep 02 '15 at 22:38

2 Answers2

1

You can try React from Facebook. It's a client framework that only generates the View.

  • Combined with webpack and webpack-dev-server you can get hot code pushes to your page.
  • Combined with less-loader or sass-loader you can get LESS/SASS support.
  • Combined with babel-loader you can run JSX for templates, which is an HTML-like markup. Also allows you to use the new ES6 features by transpiling.
TbWill4321
  • 8,626
  • 3
  • 27
  • 25
1

Try out gulp for compiling your sass with BrowserSync. Gives a lot of customization in how you compile, when to compile, etc.

kirkpatt
  • 625
  • 5
  • 21