Konzern 2.0 or k2

Reusable components in form of Marionette views to put them into templates in a declarative manner.​

Epic: https://makingwings.atlassian.net/browse/KON-6

Repo: https://bitbucket.org/wingsforweb/k2​

Demo: http://dungeonofloops.com/anton/k2/

2017-02-22

k2 Setup

application.js.coffee
#= require k2
#= require k2/btn
#= require k2/inp

Rails - Gem

node.js - Package

entry.js
import 'k2/btn';
import 'k2/inp';

application.css.sass
@import k2/btn
@import k2/inp

k2 Basic usage

template.jst.skim
== @btn {label:'Hello'}

Skim template

Handlebars template

template.hbs
{{btn label="Hello"}}

JS

new k2.btn({label: 'Hello'});

HTML

<button class="btn">

  <span class="btn__label">Hello</span>

</button>

k2 Data binding

template.jst.skim
== @inp {label:'Hello', model: @model, name="field"}

template.hbs
{{inp label="Hello" model=model name="field"}}

It will bind model field and input value - when one changes, another changes respectively. Component also might trigger some methods or events as a normal view.

k2 How it works

[ show btn.js.coffee code ]

Template helper inserts an ReplaceRegion and renders a Component view into it.

All the k2 logic is just handy conversion from options to element's tagName, className, attributes etc.

Then it could be extended to any behavior as a normal view.

k2 How to extend

class MeowButton extends k2.btn
  events:
    'click': 'onClick'
  onClick: ->
    alert('meow!')

class SaveButton extends k2.btn
  events:
    'click': 'onClick'
  onClick: =>
    @setMod({loading: true})
    @model.save()
      .then => @setMod({loading: false})

k2 Roadmap

Button: pill, toolbar
Input: text, textarea, rte,     
  checkbox, radio, select
Containers: header, sidebar,
  modal
List and table
Layout grid
...

Components:

- Finalize API, release 1.0
- Make documentation & demo
- Unit and visual auto-tests 
- Step by step replace and cleanup old konzern

Infrastructure:

k2 Questions?

smaply-comments-mode

We decided to use node.js environment for building commentsble part of Journey Maps.

Repo: https://bitbucket.org/wingsforweb/smaply-comments-mode​

smaply-comments-mode

What's new:

• ES6+ with Babel
• build with webpack (babel, coffee, sass, sourcemaps, minification, bundeling, dev server, etc)
• build time <30s, rebuild in watch mode <100 ms
• Backbone 1.3, Marionette 3, LoDash 4
• dependencies from npm
• Handlebars + injectify & layout extras
• eslint auto codestyle check
• jest unit tests