After recently planning to do a survey of tools for building rich web apps I stumbled across github.com/codylindley/frontend-tools, which claims to be an opinionated list of tools for building front-end applications. For those new to building modern web applications, it’s certainly easier to take in than larger lists like github.com/joyent/node/wiki/modules. But lists aren’t necessarily the best place to start for putting an application together. At least not where the rubber hits the road.
As the Web shifts from a web of content as we’ve known it to an application platform there’s been a renewed emphasis on composition in web app architecture. To manage composition in our Web UIs at Trunk Club we use a number of techniques and patterns to help scale our suite of rich-clients while avoiding duplication of common componentry. This article will discuss some of the patterns we use, describe the concept of a component library and introduce software for sharing modules between apps without use of WebPack or Browserify.
Learn how to use JS modules and a simple component library to share code in a forward-looking way.
A couple years back Steve Souders gave a great talk at Fluent Conf titled Your Script Just Killed My Site (video). During the talk Steve explained front-end SPOF and pointed towards a nice tool for detecting it. Fast-forward a couple of years and front-end SPOF is still a concern in web development. And, when building a single-page app, SPOF is an even bigger deal as it can cause an entire web app to become unresponsive, putting users at the mercy of the browser to download and execute 3rd-party scripts prior to bootstrapping. Read on to learn how to avoid front-end SPOF using Trunk Club’s single-page app skeleton, Brunch with Panache (BWP).
Learn how to avoid front-end SPOF using Trunk Club’s single-page app skeleton, Brunch with Panache
My team at work is currently porting an e-commerce SPA from an older framework over to Brunch with Panache (BWP), our open source development framework for web clients. Like the old framework, BWP uses both Backbone and CoffeeScript. But to make composing applications easier BWP kicks it up a notch and adds in Chaplin, giving us Collection Views.
Here’s the presentation given at Google I/O this year by Paul Irish and Pavel Feldman that got me to switch to Chrome Developer Tools promptly after watching. If you’re a front-end web developer and haven’t seen this yet take a look. It just may change the way you work.
Recently ran across this impressive list of HTML5 cross-browser shim/polyfills on GitHub on the Modernizer Wiki. A perfect excuse to try out the Link format in the WordPress Twenty Eleven theme.
Some key usability features that should be considered during creation of a Web-based modal dialog include (1) manage focus and allow tab navigation (2) disable elements outside the modal dialog (3) give users an out and (4) provide graceful error recovery.