Hello, my name is Luke Bunselmeyer. I’m a fun loving Full-Stack engineer who delights in polyglot programming from back-end to front-end, Java to JavaScript, Web services to Web development.

Many languages support concise and self documenting method calls. In JavaScript we typically use object literals to shorten method signatures. Here’s a contrived createCookie example…

/**
 * Contrived method to create a HTTP cookie
 * @param {String} name     Name of the cookie
 * @param {String} value    Value of the cookie
 * @param {Object} options  Additional cookie parameters
 */
function createCookie(name, value, options) {
    var cookie = new Cookie(name, value);
    return _.extend(cookie, options || {});
}

And we can call the method like so…

var c = createCookie('foo', 'bar', {
    path: '/aa/bb',
    expires: new Date(2015, 2, 18)
});

In comparison, the corresponding method signature in Java 1.7 blights our eyes…

Cookie createCookie(String name, String value, String path, Long maxAge, Boolean secure, Boolean httpOnly, String comment);

And calling it further assaults our asthetics. What’s with all those null’s!!!???

Cookie c = createCookie("foo", "bar", "/aa/bb", Long.MAX_VALUE, null, null, null);

Fortunately, with lambda support now baked into Java 1.8, we can use the Consumer functional interface to sweeten up createCookie

public Cookie createCookie(String name, String value, Consumer<Cookie> cookieOptions) {
    Cookie cookie = new DefaultCookie(name, value);
    cookieOptions.accept(cookie);
    return cookie;
}

Now we can call createCookie drama free…

Cookie c = createCookie("foo", "bar", (cookie) -> {
   cookie.setPath("/aa/bb");
   cookie.setMaxAge(Long.MAX_VALUE);
   cookie.setSecure(true);
});

While this is just a simple and contrived example, I feel it illustrates how Java 1.8 opens the door for many popular coding patterns practiced throughout many other language communities. I’m excited to see how the Java community embraces these new options.

Shameless plug

If you’re interested in my other hacks with Java 1.8, please check out my most recent naive pursuit: Hitch: Middleware for Java.

References

Feb 24, 2014

projects

Here’s a summary of some of the projects I’ve been hacking on…

hitch

Middleware for Java 1.8. A naive port of Connect/Express to Java 1.8 to try out Java’s fancy new Lambda support.

https://github.com/wmluke/hitch

dokku-domains-plugin

Dokku plugin to create nginx vhost with multiple domains.

https://github.com/wmluke/dokku-domains-plugin

angular-restsource

Easy restful resources for Angular JS

https://github.com/AresProjectManagement/angular-restsource

angular-locale-bundles

Internationalization and localization service and directive for Angular JS.

https://github.com/AresProjectManagement/angular-locale-bundles

grunt-inline-angular-templates

Inline angular templates into a HTML file.

https://github.com/wmluke/grunt-inline-angular-templates

angular-flash

Flash messages for Angular JS.

https://github.com/wmluke/angular-flash

angular-blocks

Block style template inheritance for AngularJS inspired by Jade, Handlebars, and Django.

http://www.bunselmeyer.net/#!/thoughts/angular-blocks

And more

Feel free to peruse my other hacks on github.

I really enjoy using block-style template inheritance in Jade and Handlebars. From my understanding, this pattern was popularized by Django.

AngularJS rocks, but it relies on template inclusion to define layouts. This means the a layout context is spread across several templates. With block-style template inheritance, layouts are defined within a single template. Moreover, multiple layouts can be DRY’ed up with inheritance.

So I set out to build angular-blocks, an AngularJS module, to support template blocks.

An Example…

First, we define some routes and scaffold the Angular app.

webapp.js

function routes($routeProvider, $locationProvider) {
    $routeProvider.when('/articles', {
        templateUrl: '/article/index.html',
        controller: Controllers.ArticleCtrl
    });

    $routeProvider.when('/articles/:id', {
        templateUrl: '/article/view.html',
        controller: Controllers.ArticleCtrl
    });

    $routeProvider.otherwise({
        templateUrl: '/pages/welcome.html',
        controller: Controllers.WelecomeCtrl
    });
}

angular.module('app', ['angular-blocks'])
    .config(['$routeProvider', '$locationProvider', routes])
    .run();

index.html

<html ng-app="app">
	<head>
		...
	</head>
	<body>
		<div ng-view></div>
	</body>
</html>

Note that <body> only contains a ngView directive. We’re not ngInclude-ing any additional templates, such as a header or footer.

Layouts

According to the Django docs,

Template inheritance allows you to build a base “skeleton” template that contains all the common elements of your site and defines blocks that child templates can override.

With this in mind, let’s define a one-column and a two-column layout.

/layouts/one-col.html

<header data-block="header">
    <h1>Awesome Blog</h1>
</header>

<div data-block="content"></div>

<footer data-block="footer">
    <p>
        <small>Copyright 2013 Blah blah blah.</small>
    </p>
</footer>

The one-col.html layout uses the data-block directive to define three blocks (header, content, and footer). Child templates can override, prepend, append, insert-before or insert-after each block by extending /layouts/one-col.html.

Now let’s create a two-column layout by extending /layouts/one-col.html.

/layouts/two-col.html

<div data-extend-template="/layouts/one-col.html">

    <ul data-block-append="header" class="breadcrumbs">
        <li ng-repeat="crumb in breadcrumbs">
            <a ng-href="{{crumb.url}}">{{crumb.display}}</a>
        </li>
    </ul>

    <div data-block="content">
        <div data-block="main-content"></div>
        <div data-block="side-nav"></div>
    </div>
</div>

The two-col.html layout uses the data-extend-template directive to extend /layouts/one-col.html. The data-block overrides the content block and defines two new blocks: main-content and side-nav. Moreover, the data-block-append directive appends content to the header block.

The resulting template looks like…

<div data-extend-template="/layouts/one-col.html">

    <header data-block="header">
        <h1>Awesome Blog</h1>
        <ul data-block-append="header" class="breadcrumbs">
            <li ng-repeat="crumb in breadcrumbs">
                <a ng-href="{{crumb.url}}">{{crumb.display}}</a>
            </li>
        </ul>
    </header>

    <div data-block="content">
        <div data-block="main-content"></div>
        <div data-block="side-nav"></div>
    </div>

    <footer data-block="footer">
        <p>
            <small>Copyright 2013 Blah blah blah.</small>
        </p>
    </footer>
</div>

So enough with layouts. Let’s create some views…

Views

We extend the one-col.html to create a “nice” landing page.

/pages/welcome.html

<div data-extend-template="/layouts/one-col.html">

    <div data-block="content" class="hero">
        <h1>Yeah! A Blog!</h1>
        <a href="/articles">Read my blog</a>
    </div>

</div>

Finally, the two-col.html layout comes in really handy when putting context specific content in the side-nav block and before the footer block.

/article/index.html

<div data-extend-template="/layouts/two-col.html">
    <div data-block="main-content">
        <article>
            <div class="article-header">
                <h2>
                    <a ng-href="/articles/{{article.titleSlug}}">{{article.title}}</a>
                </h2>
            </div>
            <div class="article-content" ng-bind-html-unsafe="article.content"></div>
        </article>
    </div>
    <div data-block="side-nav">
        <h4>Contents</h4>
        <ul>
            <li ng-repeat="article in articles">
                <a ng-href="/articles/{{article.titleSlug}}">{{article.title}}</a>
            </li>
        </ul>
    </div>
</div>

/article/view.html

<div data-extend-template="/layouts/two-col.html">

    <div data-block="main-content">
        <article>
            <div class="article-header">
                <h2>
                    <a ng-href="/articles/{{article.titleSlug}}">{{article.title}}</a>
                </h2>
            </div>
            <div class="article-content" ng-bind-html-unsafe="article.content"></div>
        </article>
    </div>

    <div data-block="side-nav">
        <h4>Tags</h4>
        <ul class="article-tags-nav">
            <li ng-repeat="tag in article.tags">
                <a href="/articles/tags/{{tag | slugify}}" class="article-tag">
                    {{tag}}
                </a>
            </li>
        </ul>
    </div>

    <footer data-block-before="footer">
        <h4>Related articles</h4>
        <ul class="related-articles">
            <li ng-repeat="article in relatedArticles">
                <a ng-href="/articles/{{article.titleSlug}}">{{article.title}}</a>
            </li>
        </ul>
    </footer>
</div>

Details

For usage and spec’s see https://github.com/wmluke/angular-blocks.

Apr 19, 2013

development

Thanks for the wonderful farewells today. Thanks for the all the humor and delight.

Thanks for the opportunity to work with the finest and the most talented people in the travel industry.

These past five years have been more rewarding than I could have imagined.

Thanks to all of you I’m a better developer…I’m a better person.

Until next we meet, Luke

http://www.switchfly.com

Switchfly

I recently had the opportunity to integrate the Play Framework with a Guice managed Java web app. This presented two main challeges: 1) where to hook-in the Guice Injector and 2) how to support Guice RequestScoped resources. Fortunately, both Play 2.1-RC1 and Guice have several API’s to simplify things. Moreover, I was able to wrap the entire solution into a reusable Play Module, play2-guice-module, which I’ll detail here.


Inspired by Guice’s excellent ServletModule integration, play2-guice-module takes advantage of some of the new Play 2.1 RC1 features to provide several utility classes to integrate Google Guice into Play.

Getting Started

Play 2.1-RC1 provides hooks to create a “dynamic” controller class with each request. In conf/routes simply prefix each controller action with an @.

# Tell Play to create a new controller with each request by prefixing the action with an `@`:
GET     /                           @controllers.Application.index()

Create a Global object which extends GuiceGlobalSettings as illustrated below…

public class Global extends GuiceGlobalSettings {
    @Override
    protected Injector createInjector() {
        return Guice.createInjector(Stage.PRODUCTION, new PlayModule() {

            @Override
            protected void configurePlay() {
                // bind some stuff!
                bind(FooPresenter.class).in(RequestScoped.class);
            }
        });
    }
}

Finally, just annotate your controller method with @With(RequestScopedAction.class) to enable @RequestScoped resources.

public class Application extends Controller {

    // ahhh immutable...
    private final FooPresenter _fooPresenter;

    // yeah, constructor injector!
    @Inject
    Application(FooPresenter fooPresenter) {
        _fooPresenter = fooPresenter;
    }

    // Enable RequestScoped resources for this action
    @With(RequestScopedAction.class)
    public Result index() {
        String bar = _fooPresenter.getBar();
        return ok(index.render("Request: " + bar));
    }
}

Available Injections

Installing the PlayModule automatically gives you access to several classes from the Play framework. These classes are injectable in any Guice injected object by default, when you install the PlayModule

@RequestScoped
public class FooPresenter {

    @Inject
    FooPresenter(Http.Request request, Http.Response response, Http.Context context) {
        ...
    }

    ...
}

See the sample-app for more details.

Sep 20, 2012

photos

Canyons > Somewhere between SFO and JFK

Aug 30, 2012

photos

Muir Beach > Congrats Emily & Kelsey!!!

Aug 6, 2012

photos

Beignet > Coffee & Beignet at Cafe Du Monde in New Orleans

Jul 27, 2012

travel photos

Highline > The High Line in NYC

Jul 15, 2012

I’m a fun loving Full-Stack engineer who delights in full-stack programming from back-end to front-end, Java to JavaScript, Web services to web development.

Specifically, I have many years of experience… 1. Building mash-up web applications bridging the gap between mainstream Internet services 2. Architecting web services with Java, Node, PHP, Ruby on Rails 3. Creating rich user interfaces via Javascript, AJAX, CSS3, and HTML5

Follow me at: github, stackoverflow, linkedin, facebook, g+, twitter, coderwall