Skip to content
This repository has been archived by the owner on Nov 9, 2022. It is now read-only.

Meeting 2014 03 03

Jump to bottom
Eric Bollens edited this page Mar 1, 2014 · 16 revisions

Information

  • Location: Math Sciences 5907
  • Date/Time: Monday March 3 from 1:00 to 2:00 PM Pacific Time
  • Conference Line: 888-921-8686 #3102061670

Attendees

WebBlocks 1

  • How's the 1.1 release working out for people?
  • Other thoughts and items?

MWF Next Generation Meeting

  • Attended by UCLA, UCSB, UCSD and UCSF
  • Discussion of where the next generation of MWF is headed
  • Some key perspectives:
    • UCLA: Mixed strategy of responsive and mobile-specific
    • UCSD: "Responsive isn't the magic bullet"
    • UCSD: Want mobile optimization strategy
    • UCSF: Not too many situations seem to justify a separate mobile site
  • Eric presented how WebBlocks 2 will distance itself from being a framework
    • Configurable package, dependency and configuration manager
    • Focus on integrating other frameworks and tools
      • Efx and ariaMapper were both developed for WebBlocks, but as separate standalong packages
      • WebBlocks 1 modules will become their own mini-frameworks (such as row, cluster, form, etc.)
      • WebBlocks itself will essentially just be a linker based on relationships defined in package metadata
      • This new strategy, coupled with making MWF assets static, makes WebBlocks an obvious assembler choice
    • Question about where it fit in the stack against yeoman, grunt, bower, etc.
      • Uses bower and npm for package-level dependency management
      • Could be used to feed scaffolding in yeoman
      • Similar level to grunt except offloading logic responsibilities to packages rather than Gruntfile
    • Next generation of MWF will be a distribution of WebBlocks with particular packages and configuration
  • Other discussion items included:
    • Native app development where first couple tiers are native and then hop to mobile web
    • Agreement that performance is the key goal - where web and native should be almost comparable
    • A new name is needed for MWF
  • Next steps:
    • Vision document (Eric, Alex, Brett, Rose) to be created on GitHub wiki page
    • "MWF 2" shall not be the name -- wiki page to be created for this as well

WebBlocks 2

Recap

  • Because WebBlocks will no longer be a single repo, new GitHub organization
  • Core repository (under development):
  • This is a completely fresh start to the architecture -- new version will:
    • Be a command-line tool blocks
    • Provide package, dependency and configuration management
    • Distributable as a gem, rpm, deb, pkg, etc.
    • No longer include modules in the main repo
    • Modules from WebBlocks 1 become their own microframeworks
    • Only bower.json and Blocksfile.rb files to define a WebBlocks build
  • During January:
    • Proposed and implemented DSL
    • Created CLI for inspecting blocks and dependencies
    • Some examples of commands include:
      • blocks help
      • blocks inspect help
      • blocks inspect blocks
      • blocks inspect blocks --attributes
      • blocks inspect bower_registry
      • blocks inspect dependency_list
      • blocks inspect dependency_order
      • blocks inspect dependency_order --type=scss
      • blocks inspect dependency_order --type=js
    • No ability to actually run a build
  • Been quiet for about a month due to other priorities (CASA)

Updates

  • Over the past week, added the following commands:
    • Operations:
      • blocks build
      • blocks watch
    • Partial commands (which produce into .blocks/workspace):
      • blocks link scss
      • blocks link js
      • blocks compile scss
  • Internal architecture:
    • bin/blocks is simply a call-forward to a Thor class WebBlocks::Thor::Runner to improve testability
    • WebBlocks::Thor defines all the Thor commands registered through WebBlocks::Thor::Runner
    • WebBlocks::Manager::Bower interacts with Bower
      • This allows bower.json to be the canonical mapping of repositories within WebBlocks
      • Actual bower system calls are expensive, so caching is built in
      • bower_components will not be reloaded unless --reload-bower is called
      • WebBlocks will not resolve added/remoted Blockfile.rb files unless --reload-registry is called
    • WebBlocks::Manager::Builder encapsulate a full run of a type of file for a task
      • Make it easy to extend and leverage as a library programmatically
    • WebBlocks::Manager::ParallelBuilder wraps WebBlocks::Manager::Builder for parallel processing
      • Abstracts out split/join logic from the rest of the application
      • Easy as saying wait_for_complete! to block main process until all worker processes finish
      • Currently fork-based model but eventually configurable (pool size and threads versus forks)
    • WebBlocks::Strategy defines strategies with execute! method to invoke
      • So far Link::Scss, Link::Js and Compile::Scss
    • WebBlocks::Structure defines a set of classes that represent the tree defined by Block/Blocksfiles
    • WebBlocks::Framework is module with framework method to bootstrap into the DSL for structures
    • WebBlocks::Product defines a set of classes that represent build products (at various stages)
    • WebBlocks::Support::ScopedLogger extends Ruby logger with progname scoping
  • Implementation on Code Climate:
    • Code Climate
  • Right now, as far as the repo goes:
    • Builds don't yet produce to final build location but rather into .blocks/workspace
    • There's a sample Blocksfile.rb that's included to make it easy to clone and test

Example: Run Outputs

This is meant to show some sample run outputs, using the following configuration files...

In bower.json:

{
    "name": "WebBlocks",
    "version": "2.0.0",
    "dependencies": {
        "WebBlocks-visibility": "WebBlocks/block-visibility",
        "efx": "ebollens/efx",
        "jquery-build": "http://code.jquery.com/jquery-1.11.0.js"
    }
}

In Blocksfile.rb:

require 'WebBlocks/framework'
include WebBlocks::Framework

# CUSTOM BLOCK DEFINITIONS

framework do

  block 'jquery-build', :path => 'bower_components/jquery-build' do
    js_file 'index.js'
  end

  block 'efx' do
    dependency framework.route 'jquery-build'
  end

end

# BLOCK REGISTRATION

framework do

  include 'WebBlocks-visibility', 'breakpoint'
  include 'WebBlocks-visibility', 'accessible'

  include 'efx', 'driver', 'accordion'
  include 'efx', 'driver', 'tabs'
  include 'efx', 'driver', 'toggle'

end

# CUSTOM SOURCES

framework do

  block 'src', :path => Pathname.new(__FILE__).parent + 'src' do
    block 'config', :path => 'config' do
      block 'WebBlocks-breakpoints' do
        scss_file 'WebBlocks-breakpoints.scss'
        reverse_dependency framework.route 'WebBlocks-breakpoints'
      end
    end
  end

  include 'src'

end
Inspect Bower Registry
$ blocks inspect bower_registry  
jquery-build
  /Users/ebollens/Developer/WebBlocks/bower_components/jquery-build
efx
  /Users/ebollens/Developer/WebBlocks/bower_components/efx
jquery
  /Users/ebollens/Developer/WebBlocks/bower_components/jquery
WebBlocks-visibility
  /Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-visibility
WebBlocks-breakpoints
  /Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-breakpoints
Inspect Blocks
$ blocks inspect blocks
framework (Framework)
  efx (Block)
    engine (Block)
      engine.js (JsFile)
    driver (Block)
      accordion (Block)
        accordion.css (ScssFile)
        accordion.js (JsFile)
      tabs (Block)
        tabs.css (ScssFile)
        tabs.js (JsFile)
      toggle (Block)
        toggle.css (ScssFile)
        toggle.js (JsFile)
  WebBlocks-visibility (Block)
    hide (Block)
      _hide.scss (ScssFile)
    accessible (Block)
      hide (Block)
        _hide.scss (ScssFile)
    breakpoint (Block)
      hide (Block)
        _hide.scss (ScssFile)
      hide-above (Block)
        _hide-above.scss (ScssFile)
    media-query (Block)
      hide (Block)
        _hide.scss (ScssFile)
  WebBlocks-breakpoints (Block)
    _variables.scss (ScssFile)
  jquery-build (Block)
    index.js (JsFile)
  src (Block)
    config (Block)
      WebBlocks-breakpoints (Block)
        WebBlocks-breakpoints.scss (ScssFile)

$ blocks inspect blocks --attributes
framework (Framework)
  :required = true
  efx (Block)
    :dependencies = [["jquery-build"]]
    :required = true
    :path = "src"
    engine (Block)
      :required = false
      :require = true
      engine.js (JsFile)
        :required = true
    driver (Block)
      :dependencies = [["efx", "engine"]]
      :required = true
      :path = "driver"
      accordion (Block)
        :required = true
        accordion.css (ScssFile)
          :required = true
        accordion.js (JsFile)
          :required = true
      tabs (Block)
        :required = true
        tabs.css (ScssFile)
          :required = true
        tabs.js (JsFile)
          :required = true
      toggle (Block)
        :required = true
        toggle.css (ScssFile)
          :required = true
        toggle.js (JsFile)
          :required = true
  WebBlocks-visibility (Block)
    :required = true
    :path = "src"
    hide (Block)
      :required = false
      _hide.scss (ScssFile)
        :required = true
    accessible (Block)
      :required = true
      :path = "accessible"
      hide (Block)
        :required = true
        _hide.scss (ScssFile)
          :required = true
    breakpoint (Block)
      :dependencies = [["WebBlocks-breakpoints"]]
      :required = true
      :path = "breakpoint"
      hide (Block)
        :required = true
        _hide.scss (ScssFile)
          :required = true
      hide-above (Block)
        :required = true
        _hide-above.scss (ScssFile)
          :required = true
    media-query (Block)
      :required = false
      :path = "media-query"
      hide (Block)
        :required = false
        _hide.scss (ScssFile)
          :required = true
  WebBlocks-breakpoints (Block)
    :dependencies = [["src", "config", "WebBlocks-breakpoints"]]
    :required = false
    _variables.scss (ScssFile)
      :required = true
  jquery-build (Block)
    :required = false
    :path = "bower_components/jquery-build"
    index.js (JsFile)
      :required = true
  src (Block)
    :required = true
    config (Block)
      :required = true
      :path = "config"
      WebBlocks-breakpoints (Block)
        :required = true
        WebBlocks-breakpoints.scss (ScssFile)
          :required = true
Inspect Dependency List
$ blocks inspect dependency_list    
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/accordion.css
  /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/engine.js
  /Users/ebollens/Developer/WebBlocks/bower_components/jquery-build/index.js
/Users/ebollens/Developer/WebBlocks/bower_components/jquery-build/index.js
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/engine.js
  /Users/ebollens/Developer/WebBlocks/bower_components/jquery-build/index.js
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/accordion.js
  /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/engine.js
  /Users/ebollens/Developer/WebBlocks/bower_components/jquery-build/index.js
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/tabs.css
  /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/engine.js
  /Users/ebollens/Developer/WebBlocks/bower_components/jquery-build/index.js
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/tabs.js
  /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/engine.js
  /Users/ebollens/Developer/WebBlocks/bower_components/jquery-build/index.js
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/toggle.css
  /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/engine.js
  /Users/ebollens/Developer/WebBlocks/bower_components/jquery-build/index.js
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/toggle.js
  /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/engine.js
  /Users/ebollens/Developer/WebBlocks/bower_components/jquery-build/index.js
/Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-visibility/src/accessible/_hide.scss
/Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-visibility/src/breakpoint/_hide.scss
  /Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-breakpoints/_variables.scss
/Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-breakpoints/_variables.scss
  /Users/ebollens/Developer/WebBlocks/src/config/WebBlocks-breakpoints.scss
/Users/ebollens/Developer/WebBlocks/src/config/WebBlocks-breakpoints.scss
/Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-visibility/src/breakpoint/_hide-above.scss
  /Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-breakpoints/_variables.scss
Inspect Dependency Order
$ blocks inspect dependency_order --type=scss
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/accordion.css
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/tabs.css
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/toggle.css
/Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-visibility/src/accessible/_hide.scss
/Users/ebollens/Developer/WebBlocks/src/config/WebBlocks-breakpoints.scss
/Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-breakpoints/_variables.scss
/Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-visibility/src/breakpoint/_hide.scss
/Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-visibility/src/breakpoint/_hide-above.scss

$ blocks inspect dependency_order --type=js
/Users/ebollens/Developer/WebBlocks/bower_components/jquery-build/index.js
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/engine.js
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/accordion.js
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/tabs.js
/Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/toggle.js
Build
$ blocks build
W, [2014-03-01 15:28:40#47291]  WARN -- INIT - Block - jquery-build: Skipped -- Blockfile.rb does not exist
D, [2014-03-01 15:28:40#47291] DEBUG -- INIT - Block - efx: Loaded
W, [2014-03-01 15:28:40#47291]  WARN -- INIT - Block - jquery: Skipped -- Blockfile.rb does not exist
D, [2014-03-01 15:28:40#47291] DEBUG -- INIT - Block - WebBlocks-visibility: Loaded
D, [2014-03-01 15:28:40#47291] DEBUG -- INIT - Block - WebBlocks-breakpoints: Loaded
D, [2014-03-01 15:28:40#47291] DEBUG -- INIT - Block: Loaded cached bower component registry
D, [2014-03-01 15:28:40#47291] DEBUG -- INIT: Loaded /Users/ebollens/Developer/WebBlocks/Blocksfile.rb
I, [2014-03-01 15:28:40#47295]  INFO -- JS - Builder: Starting
I, [2014-03-01 15:28:40#47294]  INFO -- SCSS - Builder: Starting
I, [2014-03-01 15:28:40#47294]  INFO -- SCSS - Builder - Link: Starting
I, [2014-03-01 15:28:40#47295]  INFO -- JS - Builder - Link: Starting
D, [2014-03-01 15:28:40#47294] DEBUG -- SCSS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/accordion.css
D, [2014-03-01 15:28:40#47294] DEBUG -- SCSS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/tabs.css
D, [2014-03-01 15:28:40#47295] DEBUG -- JS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/jquery-build/index.js
D, [2014-03-01 15:28:40#47294] DEBUG -- SCSS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/toggle.css
D, [2014-03-01 15:28:40#47295] DEBUG -- JS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/engine.js
D, [2014-03-01 15:28:40#47294] DEBUG -- SCSS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-visibility/src/accessible/_hide.scss
D, [2014-03-01 15:28:40#47295] DEBUG -- JS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/accordion.js
D, [2014-03-01 15:28:40#47294] DEBUG -- SCSS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/src/config/WebBlocks-breakpoints.scss
D, [2014-03-01 15:28:40#47294] DEBUG -- SCSS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-breakpoints/_variables.scss
D, [2014-03-01 15:28:40#47295] DEBUG -- JS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/tabs.js
D, [2014-03-01 15:28:40#47294] DEBUG -- SCSS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-visibility/src/breakpoint/_hide.scss
D, [2014-03-01 15:28:40#47295] DEBUG -- JS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/efx/src/driver/toggle.js
D, [2014-03-01 15:28:40#47294] DEBUG -- SCSS - Builder - Link: Linked /Users/ebollens/Developer/WebBlocks/bower_components/WebBlocks-visibility/src/breakpoint/_hide-above.scss
D, [2014-03-01 15:28:40#47294] DEBUG -- SCSS - Builder - Link: Saved /Users/ebollens/Developer/WebBlocks/.blocks/workspace/scss/blocks.scss
I, [2014-03-01 15:28:40#47294]  INFO -- SCSS - Builder - Link: Finished
I, [2014-03-01 15:28:40#47294]  INFO -- SCSS - Builder - Compile: Starting
D, [2014-03-01 15:28:40#47295] DEBUG -- JS - Builder - Link: Saved /Users/ebollens/Developer/WebBlocks/.blocks/workspace/js/blocks.js
I, [2014-03-01 15:28:40#47295]  INFO -- JS - Builder - Link: Finished
I, [2014-03-01 15:28:40#47295]  INFO -- JS - Builder: Finished
D, [2014-03-01 15:28:40#47294] DEBUG -- SCSS - Builder - Compile - Compass: identical css/blocks.css 
I, [2014-03-01 15:28:40#47294]  INFO -- SCSS - Builder - Compile: Finished
I, [2014-03-01 15:28:40#47294]  INFO -- SCSS - Builder: Finished

Example: Efx Library

This is the Blockfile.rb in the Efx repo (here):

block 'efx', :path => 'src' do |efx|

  block 'engine', :require => true do
    js_file 'engine.js'
  end

  block 'driver', :path => 'driver' do

    dependency efx.route 'engine'

    block 'accordion' do
      scss_file 'accordion.css'
      js_file 'accordion.js'
    end

    block 'tabs' do
      scss_file 'tabs.css'
      js_file 'tabs.js'
    end

    block 'toggle' do
      scss_file 'toggle.css'
      js_file 'toggle.js'
    end

  end

end

This is what it takes to, for example, include two Efx drivers...

In bower.json:

{
    "dependencies": {
        "efx": "ebollens/efx"
    }
}

In Blocksfile.rb:

framework do

  include 'efx', 'driver', 'tabs'
  include 'efx', 'driver', 'toggle'

end

Or, in Blocksfile.rb, we could include all of it:

framework do

  include 'efx'

end

Suppose we wanted to pull a build product of jQuery as well for this build...

In bower.json:

{
    "dependencies": {
        "efx": "ebollens/efx",
        "jquery-build": "http://code.jquery.com/jquery-1.11.0.js"
    }
}

And, in Blocksfile.rb, since jQuery doesn't have it's own, we can define the block ourselves (and knowing that bower will name it index.js when downloading a JS file as a component):

framework do

  block 'jquery-build', :path => 'bower_components/jquery-build' do
    js_file 'index.js'
  end

  block 'efx' do
    dependency framework.route 'jquery-build'
  end

end

If the Blocksfile.rb includes the above line and also Efx (or any sub-block within Efx), then jQuery will also be included based on this dependency configuration.

Example: Visibility Module

The visibility module from WebBlocks 1 has been turned into WebBlocks-visibility (https://github.com/WebBlocks/block-visibility). This module as a number of sources, including a couple that rely on the breakpoints defined in WebBlocks-breakpoints (https://github.com/WebBlocks/block-breakpoints).

In WebBlocks-visibility's bower.json:

{
    "name": "WebBlocks-visibility",
    "version": "1.0.0",
    "dependencies": {
        "WebBlocks-breakpoints": "WebBlocks/block-breakpoints"
    }
}

In WebBlocks-visibility's Blockfile.rb:

block 'WebBlocks-visibility', :path => 'src' do |visibility|

  block 'hide' do
    scss_file '_hide.scss'
  end

  block 'accessible', :path => 'accessible' do
    block 'hide' do
      scss_file '_hide.scss'
    end
  end

  block 'breakpoint', :path => 'breakpoint' do

    dependency framework.route 'WebBlocks-breakpoints'

    block 'hide' do
      scss_file '_hide.scss'
    end

    block 'hide-above' do
      scss_file '_hide-above.scss'
    end

  end

  block 'media-query', :path => 'media-query' do
    block 'hide' do
      scss_file '_hide.scss'
    end
  end

end

The key here is that bower.json defined where block-breakpoints resides and Blockfile.rb defined which sub-blocks of this block require what from WebBlocks-breakpoints.

Additionally, it's important to consider the same in the WebBlocks-breakpoints block...

In WebBlocks-breakpoints' bower.json:

{
    "name": "WebBlocks-breakpoints",
    "version": "1.0.0",
    "dependencies": {
    }
}

In WebBlocks-breakpoints' Blockfile.rb:

block 'WebBlocks-breakpoints' do |definition|

  scss_file '_variables.scss'

end

Now, in the actual application...

In bower.json:

{
    "dependencies": {
        "WebBlocks-visibility": "WebBlocks/block-visibility"
    }
}

In Blocksfile.rb:

framework do

  include 'WebBlocks-visibility'

end

This will load all of WebBlocks-visibility, plus the required portions of WebBlocks-breakpoints, bootstrapping on top of bower to resolve all package-level dependencies and then using Block/Blocksfile.rb to define an order based on block-level dependencies.

If the Blocksfile.rb were instead defined to be more specific and not including the responsive sub-block that requires WebBlocks-breakpoints, then WebBlocks-breakpoints would not be linked into the compile:

In `Blocksfile.rb`:

```ruby
framework do

  include 'WebBlocks-visibility', 'accessible'

end

Moving Forward

  • Near-term:
    • Cut this as a gem completely separate from Blocksfile.rb and bower.json
    • Unify Blockfile.rb and Blocksfile.rb so you can use $ blocks build to build any block on its own
    • Add optimize stage that can minifies and otherwise optimizes assets
    • Add command-line flags that specify where to output build
  • Further out:
    • Consider the question of how to add images and fonts to this stack
    • Add tests and inline documentation
    • Start cutting blocks (and providing Blockfiles for existing frameworks)
    • Look at how we can add a programmatic step in to prep a repo before link time (like jQuery build)
  • Anyone interested in helping work on WebBlock 2 dev?
Clone this wiki locally