AmpersandJS is the front-end "non-frameworky framework". Some might consider it as Backbone 2.0. Everything is a small CommonJS module published to npm, which follows strict semver. Perfect for nodeJS devs!
Considering all the discontent with AngularJS 2.0, Ampersand is a more than viable alternative for your MEAN stack.
13. @drewfyock
var WidgetCollection = require('./mycollection');
var SubCollection = require('ampersand-subcollection');
var widgets = new WidgetCollection();
widgets.fetch();
var favoriteWidgets = new SubCollection(widgets, {
where: {
awesome: true
},
comparator: function (model) {
return model.rating;
}
});
21. @drewfyock
var FormView = require('ampersand-form-view');
var InputView = require('ampersand-input-view');
var AwesomeFormView = new FormView({
submitCallback: function (obj) {
console.log('form submitted! Your data:', obj);
},
validCallback: function (valid) {
if (valid) {
console.log('The form is valid!');
} else {
console.log('The form is not valid!');
}
},
fields: [
new InputView({
name: 'client_name',
label: 'App Name',
placeholder: 'My Awesome App',
value: 'hello',
tests: [
function (val) {
if (val.length < 5) return "Must be 5+ characters.";
}
]
})
]
});
45. @drewfyock
Starting a new app
Generating form, view, model or collection
Generating models from JSON
46. @drewfyock
Starting a new app
Generating form, view, model or collection
Generating models from JSON
Generating forms from models
47. @drewfyock
Starting a new app
Generating form, view, model or collection
Generating models from JSON
Generating forms from models
Configuring the generated code
48. @drewfyock
// .ampersandrc
{
// default framework to be prompted with, options are express or hapi
framework: 'hapi',
indent: 4,
view: '', // default template
router: '', // default template
model: '', // default template
page: '', // default template
collection: '', // default template
clientfolder: 'client',
viewfolder: 'views',
pagefolder: 'pages',
modelfolder: 'models',
formsfolder: 'forms',
collectionfolder: 'models',
// whether to create collection when making a model
makecollection: true,
// if it was called without the 'gen' argument we're building a new one
// so we won't look for an application root
approot: '', // starts walking up folders looking for package.json
f: false, // overwrite
force: false, // overwrite flag, longform
quotes: 'single' // can be 'single' or 'double'
};
64. @drewfyock
Why we chose Ampersand at Bessemer:
CommonJS by default
Flexible and modular
Based on Backbone
Just the right amount of magic
Incredibly easy to integrate with Express or Hapi
Support on Gitter
65. @drewfyock
Why you might not choose Ampersand:
Still fairly new
Moonboots - Jade
Not as “full featured" as Angular or Ember
May have to roll-your-own for specific components
An overview of ampersand itself and our philosophy.
How we do things and why do them in a specific way.
"A highly modular, loosely coupled, non-frameworky framework for building advanced JavaScript apps."
Its made of models, collections, views, router - nothing unusual.
I know it MAY look not so different then other solutions, but just bear with me, I'll walk you through basics first.
dataTypes: props / session / derived
extraProperties / children / accessed by either set/get or directly thanks to defineProperty
mix of ampersand-state and ampersand-sync
sync, save, fetch, destroy
Just a place to store all your models of the same type
On its own it doesn’t do much, you need rest/underscore mixin
adds ES5 methods like filter, map, reduce, some
just a subset of your main collection
where, filter, filters, watched, comparator, limit, offset
configure, addFilter, removeFilter, clearFilters
fetch, getOrFetch, fetchById, create, sync
contains all underscore methods
el, submitCallback, validCallback, fields (can be of course registered as registerSubview)
Automatically shows/hides error messages based on tests
Live validates to always report if valid state but only shows messages when sane to do so
Will not show error messages pre-submit or it's never had a valid value. This lets people tab-through a form without triggering a bunch of error messages.
view module for intelligently rendering and validating input
array: same as input view but for multiple inputs (if you want array of answers) with add/remove buttons
Dropdown and checkboxes
role / hook
accessibility implications / ARIA roles
role/data-js/data-bind/data-hook/data-action/rel/name/classes
sets/maintains textContent of selected element. treats undefined, null, and NaN as ''
sets and maintains single class as string that matches value of property
sets the whole attribute to match value of property.
sets the value of the element to match value of the property. works well for input, select, and textarea
add/removes class based on boolean interpretation of property name
add/removes attribute based on boolean interpretation of property name
toggles existence of entire element (uses a comment node as placeholder if gone) based on boolean interpretation of property name.
Toggles existence of multiple items based on value of property.
renders innerHTML, can be a string or DOM, based on property value of model
data bindings in action
setting of avatar src, edit/view URLs
pretty straightforward, watch your routes and execute appropriate function,
handle back button, redirects etc.
pushState and hashChange
This is where fun parts begin!
Helper function for setting up prototype chains for subclasses.
thanks to it you can do `.extend()` anything
Make automatic dom binding possible (extends renderWithTemplate function)
you can even create things like react mixin, that Philip Roberts is I believe currently working on ;)
And last but not least
full app with api, structure and so on
hapi/express
To build great products, you want to use them yourself first
We wanted to create a simple base, a separate pieces that can help you solve your problems, not magically solve them for you.
I couldn't say that better.
Because how you approach it, determines how you'll solve your future problems and you for sure WILL have them sooner or later.
tangled huge parts, hard to modify for your needs
Its easier to lean few small apis than one huge api
There're no questions how to integrate it with gulp, grunt or anything like that.
All you need is browserify.
it's much easier to test small pieces then one huge framework
still working on it
publish separately
its hard to change things, because it requires bumping version in package managers as well
forks, localStorage/realtime with sockets and so on
unix philosophy
if you've a problem that you solve over and over again – you should definitely abstract it
create separate module or create mixin
npm, packages, common tools
and because of that we have ampersandjs tools page
where you can find solutions for already defined, small problems and where you can share your own modules or mixins
CLI, new app, generate model
- Why we use it
+ CommonJS by default
* Simple, familiar
* Keeps the same paradigm in server and client
+ Flexible and module
* Lightweight
* Use the parts you want, omit the ones you don't
* Each module is small, easy to grok, source is extremely approachable
+ Based in Backbone
* If you know Backbone, you know ampersand
- Models, Views, Collections
* Flexible, minimally prescriptive
- Allows for template engine of your choice
* Familiar if you've used Backbone / Marionette
+ Just the right amount of magic
* ampersand-state is the crown jewel
- Both models and views are subclasses
- Properties are cleanly declared and manipulated
* View bindings prevent writing a lot of DOM-maipulation code
- Focus on your organization and logic
* Javascript only solution
- Doesn't get into your markup, which should be agnostic (i.e. Angular?)
+ Incredibly easy to integrate with express or hapi
* Ever try setting up r.js? This is cake compared
- Why you don't want to use it
+ New, changing regularly
+ Moonboots... seriously? wtf?
+ Not as full "featured" as angular or ember
+ May have to roll-your-own for specific components
+ Too much global state
* This was going to be fixed, was it?