Chicken Javascript MVC framework
(This package is still being developed, and is not ready for use yet)
What is Chicken?
Chicken is a Javascript framework you can use to quickly build webapps. It is intended as an alternative to bigger frameworks like Ember and Angular, but without the frustration when you're trying to do something that's not in the first couple of tutorials.
Chicken allows you to do the following things easily, quickly, and well:
- Setup webapp with routes, controllers, and views (mostly working)
- Connect to a JSONAPI compliant Api (under construction)
- Authentication using JWT (under construction)
- Two-way model binding (mostly working)
- Simple creation or reusable components (under constructor)
- Use SemanticUI components (separate package, under construction)
Dependencies
Chicken uses the following third-party libraries:
Installation
The easiest way to install Chicken is by using bower
:
bower install --save chickenjs
Then add the dependencies and Chicken to your HTML page:
Create application
The first step in creating an application is adding an element and a view container to your HTML page:
Then add a script that will initialize the application, thusly:
app/js/app.js
Chickenstart;
View containers
A view container is an element in your page that can be used to render views in. Each view container needs to have a name. Every application must have at least a view container with the name main. Adding a <view-container></view-container>
or <div view-container="main"></div>
tag to your HTML page will tell the application to use this as the main view container.
You can also add view containers in your views, to allow for nested views. For example:
app/index.html
Application
app/views/page.hbs
Page
app/views/sub-page.hbs
Subpage
Now, if you were to have a route that rendered the sub-page.hbs
template into the sub
view container, the resulting HTML would look something like:
Application Page Subpage
Routing
Routing works much like most frameworks out there, and is especially inspired by Rails and Laravel. In the .routes()
callback on your application, you can define routes by calling this.route
:
this
- pattern The pattern is the uri you want the route to be accessible through. Parameters are prefixed by a
:
(or*
for wildcard-parameters). - actions You can define one action by passing a string (such as
App@home
) or callback, or multiple actions, by supplying a hash, keyed by the view container name that the action should target. By default themain
view container will be targted. - options To be detailed later...
Some examples will clarify this:
app
Note: Nested routes will always wait for their parent route to complete before executing. This allows you to render nested routes into a view container that is created by the parent route.
Controllers
Controllers are where you define what will be rendered into the view containers. For example:
app/js/controllers/ProductController.js
Chicken;
Views
A view takes care of rendering the data to proper HTML, and keeping both the data and the interface up to date. For templating we use HTMLBars, which uses Handlebars syntax.
Example
A small example to illustrate one-way and two-way binding and actions. This all works in much the same way as Ember templates do.
app/js/controllers/HomeController.js
... { return Chicken;}
app/views/home/index.hbs
<h1>Hello {{person.fullName}}!</h1><p>To kill you, I say <strong>{{reversedName}}</strong></p> <input type="text" value={{person.firstName}} placeholder="Enter your first name here..."><input type="text" value={{person.lastName}} placeholder="And your last name here..."><button {{action "log" person.fullName}}>Log it.</button> {{#if secretFound}} <h2>You found the secret!</h2>{{/if}}
Components
A component is basically a view that is set up to be reused within your templates. The following example should explain:
app/js/components/Avatar.js
Chicken;
app/views/components/avatar.hbs
<div class="avatar"> <img src={{contact.imageUrl}}> <h1>{{title}}</h1> <h2>{{contact.fullName }}</h2> <div class="bio"> {{yield}} </div></div>
app/js/controllers/ContactController.js
javascript
show: (id) => {
return Chicken.view('contacts.show') .with('contact', Chicken.api('/contacts/' + id));
}
**app/views/contacts/show.hbs**
```handlebars
<section>
{{#avatar contact=contact title="Contact details"}}
<p>This person is really good. All people are really good.</p>
{{/avatar}}
</section>
The rendered result will be something like:
Contact details John Wayne This person is really good. All people are really good.
Inline templates
For really simple components it might be easiest to define the template inline:
Chicken;
{{eu-currency value=10.3}}
Component definitions
When you define a component this way, note that you are not actually creating a Chicken.Dom.Component
instance, but a Chicken.Dom.ComponentDefinition
instance instead. The component itself will not be instantiated until it is used.