Tag: Lumbar

OSX Frontend Toolchain

by on Jan.30, 2013, under Dev

I’m currently in the middle of inventorying my machine so I can retire the time machine image that has spanned far too many years and far too many machines. Rather than stuffing this in Evernote to be used once I figured I’d post this to the community.

What other frontend tools are missing? Which ones have better alternatives?


Editors

  • SublimeText 2

    Common plugins include:

    • Package Control – Allows all other plugins to be installed
    • BracketHighlighter
    • Git
    • Handlebars.tmBundle
    • JsFormat
    • JsHint
    • PrettyJSON
    • Stylus
    • SublimeSaveOnBuild
    • TrailingSpaces

    Useful config options:

    {
      "bold_folder_labels": true,
      "draw_white_space": "all",
      "ensure_newline_at_eof_on_save": true,
      "file_exclude_patterns":
      [
        "*.tmproj",
        "*.sublime-workspace",
        "*.class",
        ".DS_Store"
      ],
      "folder_exclude_patterns":
      [
        ".svn",
        ".git",
        ".hg",
        "CVS",
        "node_modules"
      ],
      "highlight_line": true,
      "highlight_modified_tabs": true,
      "rulers":
      [
        100
      ],
      "tab_size": 2,
      "translate_tabs_to_spaces": true
    }
    

SCM

  • Git Command Line

    Your mileage may vary but by far the strongest git client out there.

    Most common git commands

    • git checkout -b $newBranchName
    • git stash
    • git pull --rebase (Warn do not do after a branch merge)

    Ensure that your version of git has completions enabled (this might require manual installation)

    Customizing your bash prompt for git status is also very helpful:

    This script whose origin has been lost will output the current branch and change status in your bash profile.

    function parse_git_branch {
      git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
    }
    function last_two_dirs {
      pwd |rev| awk -F / '{print $1,$2}' | rev | sed s_\ _/_
    }
    
    c_cyan=`tput setaf 6`
    c_red=`tput setaf 1`
    c_green=`tput setaf 2`
    c_sgr0=`tput sgr0`
    
    function proml {
      PS1='\h:$(last_two_dirs)\[$(branch_color)\]$(parse_git_branch)\[${c_sgr0}\] \u\$ '
    }
    function branch_color() {
      if git rev-parse --git-dir >/dev/null 2>&1
      then
        color=""
        git diff --quiet 2>/dev/null >&2
        if [[ $? -eq 0 ]]
        then
          color=${c_cyan}
        else
          color=${c_red}
        fi
      else
        return 0
      fi
      echo -ne $color
    }
    
    proml
        
  • Gitx

    GUI frontend on various commit related git operations. The staging view is very valuable for doing interactive commits and self-code review at commit time.

  • SourceTree

    General git repository viewer. Helpful for viewing stashed changes that may have accumulated on your local tree.

  • git-extras

    A collection of useful tools for doing higher level git commands such as delete-branch. When installing make sure that the command line tab completion tools to no error out as these are very helpful.

Debugging and Optimizing

  • Charles

    HTTP proxy and debugger with easy to use interface.

  • xScope

    Inspect/measure mocks and final rendered pages.

  • Gradient Scanner

    (Shameless plug) Extract CSS gradients from flatted mock images.

  • ImageAlpha/ImageOptim

    Image optimization tools. Performs both lossless and lossy compression of image assets.

Documents

  • Dropbox

    Easy way to backup remotely and share content across the team.

  • Evernote

    Free notetaking service.

  • MS Office

    Because somethings you can’t escape.

  • MS Remote Desktop Client

    Again somethings you can not escape.

Communication

  • Adium

    Chat over many protocols. Most common among the team are GTalk and AIM.

  • Propane

    Team chat. Setup growl notifications and stay connected.

  • Skype

    Sometimes you need to use your voice. Horrible at IM.

  • ScreenFlow

    Generate screen casts for sharing content with coworkers or debugging transient behaviors.

System

  • Alfred

    Search-based system launcher.

  • Growl

    Common notification system for Lumbar builds and Propane and others.

  • Divvy

    Window position manager

  • Stay

    Utility which will restore your windows when you connect or disconnect a monitor.

  • BetterTouchTool

    Keyboard/mouse/touchpad gesture mapper.

  • Cloud App

    Dirt simple screenshot sharing app. Useful for sharing screenshots and other local content over IM and email when attachments might not be supported or supported easily.

  • Homebrew

    OSS package manager.

  • nvm

    Node version switcher. Easily allows for switching between different versions of node.

    Current recommendations for the latest 0.8 node branch for running the development build stack as the watch issues on the 0.8 branch seem to have been resolved.

3 Comments :, , , more...

Lumbar: Modular Javascript Build

by on Jan.17, 2012, under Web Dev

Since joining @WalmartLab’s mobile web team close to a year ago we have been very busy rebuilding the mobile web platform using Backbone, Handlebars, Stylus and other awesome open source tools and frameworks.

Even though these tools allow for some pretty impressive feats of javascript, we kept hitting inefficiencies both in execution and developer time due to resource loading and management.

When dealing with handlebars for example, we consistently found that we were trying to fight against the system to manage the templates used by a view. We neither wanted to manually inline the template in the javascript as we all know that escaping a language within a language is just painful, ala Java running SQL, nor did we want to add the additional overhead of an additional request for deferred loading of templates or worse inlining all application templates within the html file.

Being both constrained by the mobile environment and needing to operate at the scale of Walmart it became apparent very quickly that we needed to have some sort of build-time utility to manage this so the developer can focus on creating the application logic, throw it into the build tool and out comes a nicely optimized module of code and styles.

Lumbar along with the associated Lumbar projects such as lumbar-loader and lumbar-long-expires are the fruits of these efforts.

Overview

The Lumbar suite focuses on the management of all resources required to generate complex javascript applications across many different platforms and environments. It’s primary goals are to easily package, optimize, link to resources such as javascript, html, templates, styles, images, and any other client-side resources that web application may require.

From it’s initial implementation, Lumbar has focused on making client performance the number one goal, to this end it allows for chunking resources into distinct code modules, easy minification, inlining, and cache management.

Configuration

Lumbar is configured through a simple JSON config file, defining modules which are simple, demand loaded, segments of the application.

A base module that loads the core application:
    "base": {
      "scripts": [
        {"src": "js/lib/zepto.js", "global": true},
        {"src": "js/lib/underscore.js", "global": true},
        {"src": "js/lib/backbone.js", "global": true},
        {"src": "js/lib/handlebars.js", "global": true},
        {"src": "js/lib/thorax.js", "global": true},
        {"src": "js/lib/script.js", "global": true},
        {"src": "js/lib/lumbar-loader.js", "platform": "web"},
        {"src": "js/lib/lumbar-loader-standard.js", "platform": "web"},
        {"src": "js/lib/lumbar-loader-backbone.js", "platform": "web"},
        "js/init.js",
        {"src": "js/bridge.js", "platforms": ["iphone", "ipad", "android"]},
        {"src": "js/bridge-android.js", "platform": "android"},
        {"src": "js/bridge-ios.js", "platforms": ["ipad","iphone"]},
        {"module-map": true}
      ],
      "styles": [
        "styles/base.styl",
        {"src": "styles/iphone.styl", "platform": "iphone"},
        {"src": "styles/android.styl", "platform": "android"},
        {"src": "styles/ipad.styl", "platform": "ipad"},
        {"src": "styles/web.styl", "platform": "web"}
      ],
      "static": [
        {"src": "static/#{platform}/index.html", "dest": "index.html"}
      ]
    },

A router-linked module. When using backbone/thorax integration, this module will automatically load when the # or #hello routes are navigated:
    "hello-world": {
      "routes": {
        "": "index",
        "hello": "index"
      },
      "scripts": [
        "js/views/hello-world",
        "js/routers/hello-world.js"
      ],
      "styles": [
        "styles/hello-world.styl"
      ]
    }

This config file also defines the platforms that lumbar will generate, allowing for customizing the modules for different environments ("platforms": [ "android", "iphone", "ipad", "web" ]). At @WalmartLabs we utilize this to serve customized experiences for the native clients utilizing the same codebase.

Walmart Checkout Designs

Single stylus codebase styled for iPhone, Android, and mobile web platforms.

Walmart Checkout - iPad

More dramatic customizations of the same codebase utilizing platform conditional code.

The final component of the configuration is the packages component, which allows for bundling specific modules into singular responses when a particular use case only uses a subset of modules, such as the native checkout implementations utilized by @WalmartLabs.

  "packages": {
    "web": {
      "platforms": [ "web" ],
      "combine": false
    },
    "native-hello-world": {
      "platforms": [ "android", "iphone", "ipad" ],
      "modules": [ "base", "hello-world" ],
      "combine": true
    }
  },
Package declarations defining normal loading for web and combined for native platforms.

On building this will generate the following structure:

    $ find . -type f
    ./android/index.html
    ./android/native-hello-world.css
    ./android/native-hello-world.js
    ./android/native-hello-world@1.5x.css
    ./ipad/index.html
    ./ipad/native-hello-world.css
    ./ipad/native-hello-world.js
    ./iphone/index.html
    ./iphone/native-hello-world.css
    ./iphone/native-hello-world.js
    ./iphone/native-hello-world@2x.css
    ./web/base.css
    ./web/base.js
    ./web/base@2x.css
    ./web/hello-world.css
    ./web/hello-world.js
    ./web/hello-world@2x.css
    ./web/index.html

Which can be deployed as static resources to any web server, served via a CDN, or distributed by many other means.

While not a core feature, the lumbar-long-expires plugin takes this a step further by allowing resources to include expires tokens in their names automatically. When enabled the above may generate content like the following, allowing for the application resources to be served with extended Expires headers.

    $ find . -type f
    ./android/cb188f8/native-hello-world.css
    ./android/cb188f8/native-hello-world.js
    ./android/cb188f8/native-hello-world@1.5x.css
    ./android/index.html
    ./ipad/cb188f8/native-hello-world.css
    ./ipad/cb188f8/native-hello-world.js
    ./ipad/index.html
    ./iphone/cb188f8/native-hello-world.css
    ./iphone/cb188f8/native-hello-world.js
    ./iphone/cb188f8/native-hello-world@2x.css
    ./iphone/index.html
    ./web/cb188f8/base.css
    ./web/cb188f8/base.js
    ./web/cb188f8/base@2x.css
    ./web/cb188f8/hello-world.css
    ./web/cb188f8/hello-world.js
    ./web/cb188f8/hello-world@2x.css
    ./web/index.html

The @WalmartLabs mobile team believes strongly in open source software which is why in addition to open sourcing Lumbar we are also open sourcing our Thorax framework. If you are a backbone user looking to ease common tasks such as data binding and linking data operations to a particular route I urge you to take a look. It even integrates with Lumbar!

Comments Off on Lumbar: Modular Javascript Build :, , , , more...

Visit our friends!

A few highly recommended friends...