Ampersand.js – Minimalistic Approach to not so minimalistic Problems

7fa6c608c58feec29a780ba5f7700068?s=47 Kamil Ogórek
September 11, 2014

Ampersand.js – Minimalistic Approach to not so minimalistic Problems

Most of the client-side frameworks those days, aim to solve all developer problems at once, even when you didn’t ask them to. What if we could let developers decide which parts of the ecosystem they want to use, instead of handing them a big monolithic black-box. Those parts could be maintained, updated and delivered separately, without any interruptions to the other parts, but they’re working together like a charm at the same time.

Not to say that very few of them let you almost never leave your terminal, fully leverage NPM, CommonJS modules and your whole build process, which is essential for rapid development. Add to that a pinch of CLI generators, code reuse on a server-side, curated list of already solved problems and you’ll get Ampersand.js – non-frameworky framework for building advanced JavaScript apps, where it’s up to you how you’ll use it. Ampersand gives you lots of tools, just enough conventions, but tons of flexibility.

7fa6c608c58feec29a780ba5f7700068?s=128

Kamil Ogórek

September 11, 2014
Tweet

Transcript

  1. 8.
  2. 10.
  3. 12.

    var Person = AmpersandState.extend({ props: { firstName: 'string', lastName: 'string'

    }, session: { signedIn: ['boolean', true, false], }, derived: { fullName: { deps: ['firstName', 'lastName'], fn: function () { return this.firstName + ' ' + this.lastName; } } } });
  4. 19.

    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; } });
  5. 22.
  6. 25.

    var PersonRowView = AmpersandView.extend({ template: "<li><span data-hook='name'></span><span data-hook='age'></span><a data- hook='edit'>edit</a></li>",

    ! events: { "click [data-hook=edit]": "edit" }, ! bindings: { "model.name": { type: 'text', hook: 'name' }, ! "model.age": { type: 'text', hook: 'age' } }, ! edit: function () {...} });
  7. 29.

    var pageSwitcher = new ViewSwitcher(pageContainer, { waitForRemove: true, hide: function

    (oldView, newView, cb) { oldView.el.classList.add('animateOut'); setTimeout(cb, 1000); }, show: function (newView, oldView) { document.title = newView.pageTitle || 'app name'; document.body.scrollTop = 0; ! app.currentPage = newView; ! newView.el.classList.add('animateIn'); } });
  8. 31.

    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."; } ] }) ] });
  9. 37.
  10. 46.
  11. 47.

    var AppRouter = AmpersandRouter.extend({ routes: { "help": "help", // #help

    "search/:query":"search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, ! help: function() {...}, ! search: function(query, page) {...} });
  12. 57.

    Starting a new app Generating form, view, model or collection

    Generating models from JSON Generating forms from models
  13. 58.

    Starting a new app Generating form, view, model or collection

    Generating models from JSON Generating forms from models Configuring the generated code
  14. 59.

    // .ampersandrc ! { framework: 'hapi', indent: 4, view: '',

    router: '', model: '', page: '', collection: '', clientfolder: 'client', viewfolder: 'views', pagefolder: 'pages', modelfolder: 'models', formsfolder: 'forms', collectionfolder: 'models', makecollection: true, approot: '', force: false, quotes: 'single' }
  15. 68.
  16. 73.
  17. 74.