Tweet
Tweet

Slide 1

Slide 1 text

Ampersand.js Minimalistic Approach to not so minimalistic Problems @kamilogorek

Slide 2

Slide 2 text

X-Team Senior Client-side Engineer

Slide 3

Slide 3 text

X-Labs A fund dedicated to supporting open source communities.

Slide 4

Slide 4 text


 Ampersand.js

Slide 5

Slide 5 text


 Ampersand.js

Slide 6

Slide 6 text


 @henrikjoreteg @philip_roberts @lancestout @lynnandtonic @lukekarrys @wraithgar 
 Ampersand.js

Slide 7

Slide 7 text


 @henrikjoreteg @philip_roberts @lancestout @lynnandtonic @lukekarrys @wraithgar @kamilogorek 
 Ampersand.js

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Overview

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

State ampersand-state

Slide 12

Slide 12 text

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; } } } });

Slide 13

Slide 13 text

Models ampersand-model ampersand-state ampersand-sync

Slide 14

Slide 14 text

Collections

Slide 15

Slide 15 text

ampersand-collection ! !

Slide 16

Slide 16 text

ampersand-collection ampersand-state

Slide 17

Slide 17 text

ampersand-collection ampersand-subcollection ! !

Slide 18

Slide 18 text

ampersand-subcollection ampersand-collection ampersand-collection-underscore-mixin

Slide 19

Slide 19 text

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; } });

Slide 20

Slide 20 text

ampersand-collection ampersand-subcollection ampersand-rest-collection ! !

Slide 21

Slide 21 text

ampersand-rest-collection ampersand-collection-rest-mixin ampersand-collection ampersand-collection-underscore-mixin

Slide 22

Slide 22 text

Views

Slide 23

Slide 23 text

ampersand-view ! !

Slide 24

Slide 24 text

ampersand-view ampersand-collection-view ampersand-state ampersand-dom-bindings

Slide 25

Slide 25 text

var PersonRowView = AmpersandView.extend({ template: "
  • edit
    • ", ! events: { "click [data-hook=edit]": "edit" }, ! bindings: { "model.name": { type: 'text', hook: 'name' }, ! "model.age": { type: 'text', hook: 'age' } }, ! edit: function () {...} });

    Slide 26

    Slide 26 text

    ampersand-view ampersand-collection-view !

    Slide 27

    Slide 27 text

    ampersand-view ampersand-collection-view ampersand-view-switcher ! !

    Slide 28

    Slide 28 text

    ampersand-view-switcher ampersand-view

    Slide 29

    Slide 29 text

    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'); } });

    Slide 30

    Slide 30 text

    ampersand-view ampersand-collection-view ampersand-view-switcher ampersand-form-view ! !

    Slide 31

    Slide 31 text

    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."; } ] }) ] });

    Slide 32

    Slide 32 text

    ampersand-view ampersand-collection-view ampersand-view-switcher ampersand-form-view ampersand-input-view ! !

    Slide 33

    Slide 33 text

    ampersand-view ampersand-collection-view ampersand-view-switcher ampersand-form-view ampersand-input-view ampersand-array-input-view !

    Slide 34

    Slide 34 text

    ampersand-view ampersand-collection-view ampersand-view-switcher ampersand-form-view ampersand-input-view ampersand-array-input-view ampersand-select-view

    Slide 35

    Slide 35 text

    ampersand-view ampersand-collection-view ampersand-view-switcher ampersand-form-view ampersand-input-view ampersand-array-input-view ampersand-select-view ampersand-checkbox-view !

    Slide 36

    Slide 36 text

    View Bindings ampersand-dom-bindings ampersand-dom

    Slide 37

    Slide 37 text

    text

    Slide 38

    Slide 38 text

    text class

    Slide 39

    Slide 39 text

    text class attribute

    Slide 40

    Slide 40 text

    text class attribute value

    Slide 41

    Slide 41 text

    text class attribute value booleanClass

    Slide 42

    Slide 42 text

    text class attribute value booleanClass booleanAttribute

    Slide 43

    Slide 43 text

    text class attribute value booleanClass booleanAttribute toggle

    Slide 44

    Slide 44 text

    text class attribute value booleanClass booleanAttribute toggle switch

    Slide 45

    Slide 45 text

    text class attribute value booleanClass booleanAttribute toggle switch innerHTML

    Slide 46

    Slide 46 text

    Router

    Slide 47

    Slide 47 text

    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) {...} });

    Slide 48

    Slide 48 text

    Mixins ampersand-class-extend

    Slide 49

    Slide 49 text

    ampersand-collection-rest-mixin

    Slide 50

    Slide 50 text

    ampersand-collection-rest-mixin ampersand-collection-underscore-mixin

    Slide 51

    Slide 51 text

    ampersand-collection-rest-mixin ampersand-collection-underscore-mixin ampersand-domthing-mixin

    Slide 52

    Slide 52 text

    ampersand-collection-rest-mixin ampersand-collection-underscore-mixin ampersand-domthing-mixin ampersand-react-mixin

    Slide 53

    Slide 53 text

    Ampersand CLI

    Slide 54

    Slide 54 text

    Starting a new app

    Slide 55

    Slide 55 text

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

    Slide 56

    Slide 56 text

    Starting a new app Generating form, view, model or collection Generating models from JSON

    Slide 57

    Slide 57 text

    Starting a new app Generating form, view, model or collection Generating models from JSON Generating forms from models

    Slide 58

    Slide 58 text

    Starting a new app Generating form, view, model or collection Generating models from JSON Generating forms from models Configuring the generated code

    Slide 59

    Slide 59 text

    // .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' }

    Slide 60

    Slide 60 text

    Philosophy

    Slide 61

    Slide 61 text

    "Optimize for change, it's the only constant." @HenrikJoreteg 10 Sep 2014

    Slide 62

    Slide 62 text

    It's not about solving a problem, it's about how you approach it

    Slide 63

    Slide 63 text

    It's easier to learn only things you need to know

    Slide 64

    Slide 64 text

    Everything is separate commonjs module

    Slide 65

    Slide 65 text

    Everything is hosted on npm

    Slide 66

    Slide 66 text

    Everything should be fully tested

    Slide 67

    Slide 67 text

    Everything has separate git repo

    Slide 68

    Slide 68 text

    No content

    Slide 69

    Slide 69 text

    Everything has separate git repo separate issues

    Slide 70

    Slide 70 text

    Everything has separate git repo separate issues separate life

    Slide 71

    Slide 71 text

    Everything do one thing and do it well

    Slide 72

    Slide 72 text

    Leverage existing solutions and don't reinvent the wheel

    Slide 73

    Slide 73 text

    No content

    Slide 74

    Slide 74 text

    Summary

    Slide 75

    Slide 75 text

    ! http://ampersandjs.com/contribute http://issues.ampersandjs.com https://github.com/ampersandjs

    Slide 76

    Slide 76 text

    Thank You @kamilogorek