kulakowka / express-cells-experiment

Experiment with jade and express.js inspired by Rails Trailblazer Cells.

Experiment with jade and express.js inspired by Rails Trailblazer Cells.

Start server

npm install
npm start

Controller

./app/server.js

let app = express()

// ...

app.use(require('component').middleware())

// ...

app.get('/', (req, res) => {
  const user = {
    firstName: 'Anton',
    lastName: 'Kulakov'
  }

  const comment = {
    id: 1,
    text: 'Comment text example',
    user
  }

  const meta = {
    title: 'Home page'
  }

  res.render('index', {
    user,
    meta,
    comment
  })
})

View

./app/views/index.jade

!= Component("header", meta)

.homePage
  = "Home"
  != Component("comment", comment)

.userInfo
  != Component("user", user)

Components:

Comment

./app/views/components/comment/comment.jade

.comment
  .id= id
  .text= text
  .time= time
  != Component("user", user)

./app/views/components/comment/comment.js

'use strict'

const Component = require('component')

class Comment extends Component {
  show () {
    this.data.time = Date.now()
    return this.render(this.data)
  }
}

module.exports = Comment

User

./app/views/components/user/user.js

'use strict'

const Component = require('component')

class User extends Component {
  show () {
    return `${this.data.firstName} ${this.data.lastName}`
  }
}

module.exports = User

Header

./app/views/components/header/header.jade

header
  .pageTitle= title

./app/views/components/header/header.js

'use strict'

const Component = require('component')

class Header extends Component {
}

module.exports = Header