3

I want to start my first Cycle.js project and I will develop it in conjunction with a friend. He is an HTML designer (knows a lot about HTML and CSS, and he creates Handlebars templates) and I know a bit about JS.

I would like to know if there are any resources about how the HTML designer <--> JS Dev flow could be done.
Or in other words, how to extract HTML resources into different files.

Thanks in advance

Mictian
  • 107
  • 4

2 Answers2

2

For each screen you will have "view" function in JavaScript, where the markup will be written in JavaScript using hyperscript-helpers. If you need to convert from HTML markup to hyperscript-helpers, use http://html-to-hyperscript.paqmind.com/ .

André Staltz
  • 13,304
  • 9
  • 48
  • 58
  • Thanks for your replay :D! Is there any example showing how to do it? I dont see clearly how extract the 'VDOM' creation from the view. For example in this [simple code](https://github.com/cyclejs/cycle-examples/blob/master/hello-world/src/main.js) the code depends on the stream map. – Mictian Feb 10 '16 at 00:43
  • After seeing these [videos](https://egghead.io/series/cycle-js-fundamentals) I understand much better your answer. BTW I recommend seeing them, those are really cool – Mictian Feb 17 '16 at 01:09
0

I have a similar situation, I program the business logic and my daughter programs the HTML and CSS. So, inspired by hyperstream, and since CycleJS uses the Snabbdom virtual DOM library, I wrote snabbdom-template. This module inserts dynamic data by targeting standard HTML tag names and other CSS selectors and replacing mocked values.

Here's a simplified workflow example: first I program the business logic and core HTML:

main.js

...

function main(sources) {

  const data$ = sources.incomingdata

  const vdom$ = data$
    .map(list => div([
        div('#message', 'Ready.'),
        ul('#mapme', list.map(item => li(item)))
      ])
    )

  return {
    DOM: vdom$
  }
}

...

Or—if using Babel and snabbdom-jsx:

...
const vdom$ = data$
  .map(list =>
    <div>
      <div id="message">Ready.</div>
      <ul id="mapme">
        {list.map(item => <li>{item}</li>)}
      </ul>
    </div>
  )
...

Then I tell my daughter I need a message div with id set to "message" followed by an unordered list with an id that is set to "mapme". Let's say she provides a file containing:

list.html

<div>
  <div id="message">Message goes here.</div>
  <ul id="mapme">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Then I change my main.js to:

...

const snabbdom_template = require('snabbdom-template')
const fs = require('fs')
const template = fs.readFileSync('list.html', 'utf-8')

function main(sources) {

  const data$ = sources.incomingdata

  const vdom$ = data$
    .map(list => snabbdom_template(template, {
      'div#message': 'Ready.',
      '#mapme': {_map: {'li': list}}
    }))

  return {
    DOM: vdom$
  }
}

...

When I bundle main.js using browserify I add the brfs transform to hardcode the templates into the bundle:

  browserify -t brfs main.js > bundle.js

Now she can make updates to list.html—as long as core HTML and ID's or classes used to target data remain—and the only thing I need to do is rebundle.

bloodyKnuckles
  • 11,551
  • 3
  • 29
  • 37