I developed the Luca framework while working at BenchPrep where we used it to develop several large single page apps on top of the backbone.js library.
I had worked with ExtJS for several years prior and have stolen my favorite concepts from that framework such as the component driven architecture where you develop your views as standalone components and then join them together with other components using container views. And since it is heavily based on configuration, developing an app in Luca feels a lot like describing an object with JSON.
One advantage to this approach is the ability to re-use components across several apps or in different places in your app, with with only minor changes using Backbone's extend. It is also very easy to experiment with many different layouts / presentations of components by making only minor tweaks to the JSON configuration.
In addition to a wide range of helper / utility functions, Luca Ships with many higher level Backbone derivatives that you can piece together in any way imagineable to build a complex UI.
Views, Components, Containers
- Augmented Model, View, Collection, Router classes
- Configuration options that facilitate communication between Models, Collections, Views, the Application and its respective managers.
- Containers ( Split / Column Layout, Grid Layout, Tab View, Card / Wizard View )
- FormView with all of the standard field components, and helpers for syncing with a Backbone.Model
- GridView, for generating scrollable grid elements from a Luca.Collection
- CollectionView, for generating views based on a collection
- Toolbars / Buttons
Twitter Bootstrap Styles and Markup For Free
- Luca plays very well with the Twitter bootstrap framework. Simply by setting Luca.enableBootstrap = true, and including the CSS, your components ( such as the tab views, the toolbars, buttons, forms, fields, grids, etc ) will automatically use Twitter Bootstrap compatible markup and CSS class conventions.
- Uses the Grid system for layout, and responds to most of the bootstrap base css classes in an intelligent way
- Luca.Viewport and GridLayout components are setup to work with bootstrap's responsive, fluid, or static grid systems.
- Aims to provide a one to one match for twitter bootstrap components, to represent them as configurable Backbone Views
The Application Component
- Backbone.Model based state machine provides getter / setter methods and attribute change events as a style of application control flow
- Integrated Controller component which hides / shows pages of the app in response to Backbone.Router or State Machine events
- Integrated Collection Manager which keeps track of the collections you have created, allows you to scope them, group them, assign default parameters to them
- A Socket Manager which is an abstraction layer on top of websocket services that makes push as easy as Backbone.Event
- A Keyboard Event router which triggers named key events on components which care to respond to such events
Collection and Model Enhancements
- Collections are based on backbone-query, which provides a querying interface very similar to mongoDb
- enable a local storage Backbone.sync simply by setting collection.localStorage = true
- automatic population of collections whose data is bootstrapped on page load
- cached methods / computed properties. cache the result of collection methods, and expire the cache in response to change / add / remove events on the collection or its models
- computed properties on the models. build attributes based on complex function, and automatically update the computed value in response to changes
Events and Hooks
Luca components are more liberal with the events they emit compared to the stock Backbone components. They will emit events like before:initialize, after:initialize, before:render, after:render, activation, first:activation, deactivation, first:deactivation, and this allows you to more finely tune the behavior of your components. Plus, by defining an event in the @hooks porperty on your view, it will automatically call a similarly named function for you if it exists. This prevents a lot of callback style code which improves readability.
You can also configure the Luca.Events class to publish the events to a global publish / subscribe channel, which makes building a large application easier and aids in inter module communication.
The Ruby Gem
Luca was developed specifically while working against Rails and Sinatra APIs and because of this is currently optimized for a specific stack, but it in no way locks you into a specific server.
Luca comes distributed as part of a Ruby Gem configured to work on the asset pipeline, or as a downloadable JS file.
You are not required to use Rails, or Sinatra. But if you do, I have included a lot of useful things:
- Files with the .luca extension get processed as HAML with JST style variable interpolation. ( equivalent to .jst.ejs.haml ) by the asset pipeline
- A Test Harness for browser, or headless Jasmine based Unit Tests along with many Backbone and Underscore test helpers.
- An API endpoint for the development toolset that ships with Luca ( more on this later )
- An API endpoint that allows you to use Redis as a schemaless storage engine for Luca.Collection with minimal configuration
The Development Tools
- Luca applications can enable an in browser coffeescript console with Luca specific helpers and commands that aid in monitoring, inspecting, debugging Luca applications and components
With the help of the Rails Gem, and Luca's CodeMirror based component editor, you can edit the source code of the Luca Framework as well the application specific components directly in the browser, using Coffeescript. You will see immediate feedback in response to your edits, with the instances of effected objects being refreshed with the updated prototype, and you can save your changes to disk.
The Component Tester is a live sandbox for playing with the components that make up your application in isolation. It provides you with tools for modifying the component's prototype, setting up its dependencies, and configuring the component. The component will re-render immediately every time you make an edit. You can view and edit the markup that the component generates, as well as the CSS directly in the browser and see your changes immediately. This makes it a very valuable experimentation tool.
The Component Tester will soon integrate with Jasmine so you can view the results of your component unit tests in real time as you edit their code
Luca is a work in progress, but maintains a stable API ( not yet 1.0 ) and has been used in several large production apps. It is definitely a very opinionated framework, but I am working on making it more modular. I am actively working on the documentation and sample components.
