Slide 1

Slide 1 text

RALPH WHITBECK AMPLIFYJS STREAMLINE YOUR WEB APP WITH

Slide 2

Slide 2 text

RALPH WHITBECK WHAT IS AMPLIFYJS?

Slide 3

Slide 3 text

RALPH WHITBECK APPENDTO • AmplifyJS came out of appendTo’s need for: • solving common web application tasks • client/internal project development • simple API abstractions for: • Client Side Component Communications (Pub/Sub) • Client Side Browser & Mobile Device Storage (Store) • Ajax Request Management (Request)

Slide 4

Slide 4 text

RALPH WHITBECK AMPLIFYJS IS ... • A set of JavaScript Components • Pub/Sub: amplify.publish, amplify.subscribe • Local storage: amplify.store • Request data: amplify.request

Slide 5

Slide 5 text

RALPH WHITBECK AMPLIFYJS IS OPEN SOURCE • http://amplifyjs.com • https://github.com/appendto/amplify • Duel Licensed: • MIT • GPLv2

Slide 6

Slide 6 text

RALPH WHITBECK PUB/SUB

Slide 7

Slide 7 text

RALPH WHITBECK SIMPLE PUB/SUB SYNTAX amplify.subscribe(“publishexample”,  function()  {        alert(  “publishexample  topic  published”); }); //  ... amplify.publish(“publishexample”);

Slide 8

Slide 8 text

RALPH WHITBECK AMPLIFY’S PUB/SUB • Is often referred to as the core of the library • amplify.publish and amplify.subscribe facilitate the Publish and Subscribe messaging pattern • Someone broadcasts (publish) / Someone else listens (subscribes) • Separating logic allows for loose coupling of your components • Results in less brittle more reusable code

Slide 9

Slide 9 text

RALPH WHITBECK USAGE amplify.subscribe(  string  topic,  function  callback  ); amplify.subscribe(  string  topic,  object  context,  function  callback  ); amplify.subscribe(  string  topic,  function  callback,  number  priority); amplify.subscribe(  string  topic,  object  context,  function  callback,                                        number  priority); • topic: Name of the message to subscribe to. • [context]: What this will be when the callback is invoked. • callback: Function to invoke when the message is published. • [priority]: Priority relative to other subscriptions for the same message.

Slide 10

Slide 10 text

RALPH WHITBECK PUB/SUB WITH CONTEXT AND DATA amplify.subscribe(  “contextdata”,  $(“p:first”),  function(  data  )  {        this.text(  data.newtext  ); }); //  ... amplify.publish(  “contextdata”,  {  newtext:  “This  is  new  text.”  }  ); //  Multiple  data  parameters amplify.subscribe(  “multipleparams”,  function(  data1,  data2  )  {  ...  }); //  ... amplify.publish(  “multipleparams”,  “foo”,  “bar”  );

Slide 11

Slide 11 text

RALPH WHITBECK SETTING PRIORITY amplify.subscribe(  “priorityexample”,  function  (param)  {  ...  }  ); //... amplify.subscribe(  “priorityexample”,  function  (param)  {          if  (  param  ===  null  ||  param  ===  undefined  )  {                return  false;        } },  1  ); //... amplify.publish(  “priorityexample”,  someVariable  );

Slide 12

Slide 12 text

RALPH WHITBECK STORE

Slide 13

Slide 13 text

RALPH WHITBECK ABSTRACTED LOCALSTORAGE amplify.store(  "employeeName",  "Ralph  Whitbeck"  ); amplify.store(  "Employee",  {  fullName      :  "Ralph  Whitbeck",                                                            startDate    :  "October  24,  2011",                                                          position      :  "Senior  Developer"  });

Slide 14

Slide 14 text

RALPH WHITBECK AMPLIFY’S STORE • Wrapper for various client-side storage systems • Consistent API that handles storage cross-browser • Utilizes latest storage technologies for those browser that have them • Degrades gracefully for browsers without support • Passively/explicitly choose the storage type to use • Serializes to/from JavaScript objects using JSON serialization

Slide 15

Slide 15 text

RALPH WHITBECK STORAGE TYPES • Amplify Supports the following storage types: • localStorage • sessionStorage • globalStorage • userData • memory

Slide 16

Slide 16 text

RALPH WHITBECK SUPPORTED BROWSERS • localStorage • IE 8+ • Firefox 3.5+ • Safari 4+ • Chrome • Opera 10.5+ • iPhone 2+ • Andriod 2+ • sessionStorage • IE 8+ • Firefox 2+ • Safari 4+ • Chrome • Opera 10.5+ • iPhone 2+ • Andriod 2+ • globalStorage • Firefox 2+ • userData • IE 5-7 • memory

Slide 17

Slide 17 text

RALPH WHITBECK DEPENDENCY NOTE • For browsers that do not support JSON natively you’ll need json2.js • Unsupported browsers include: • IE 5 • IE 6 • IE 7 • Firefox 2.0 • Firefox 3.0

Slide 18

Slide 18 text

RALPH WHITBECK USAGE amplify.store(  string  key,  mixed  value  [,  hash  options  ]  ); • key: Identifier for the value being stored. • value: The value to store. The value can be anything that can be serialized as JSON. • [options]: A set of key/value pairs that relate to settings for storing the value.

Slide 19

Slide 19 text

RALPH WHITBECK BASIC EXAMPLE amplify.store(  "employeeName",  "Ralph  Whitbeck"  ); var  _name  =  request.store(  "employeeName"  );  //Ralph  Whitbeck //  ... amplify.store(  "Employee",  {  fullName      :  "Ralph  Whitbeck",                                                            startDate    :  "October  24,  2011",                                                          position      :  "Senior  Developer"  }); var  employee  =  amplify.store(  "Employee"  ); employee.fullName;    //Ralph  Whitbeck employee.startDate;  //October  24,  2011 employee.position;    //Senior  Developer

Slide 20

Slide 20 text

RALPH WHITBECK STORE DATA EXPLICITLY //  localStorage amplify.store.localStorage(  "localVariable",  {  foo:  "bar"  }  ); //  sessionStorage amplify.store.sessionStorage(  "sessionVariable",  {  foo:  "bar"  }  ); //  globalStorage amplify.store.globalStorage(  "globalVariable",  {  foo:  "bar"  }  ); //userData amplify.store.userData(  "userVariable",  {  foo:  "bar"  }  ); //memory amplify.store.memory(  "memoryVariable",  {  foo:  "bar"  }  );

Slide 21

Slide 21 text

RALPH WHITBECK REQUEST

Slide 22

Slide 22 text

RALPH WHITBECK AMPLIFY’S REQUEST • Abstraction layer for any kind of request for data • Create and maintain your entire server interface and caching policy in one place by using amplify.request.define • Components that need data use amplify.request without concern for the implementation details that we defined in amplify.request.define • Requests made through amplify.request will always be made asyncronously

Slide 23

Slide 23 text

RALPH WHITBECK USAGE - DEFINE A RESOURCE amplify.request.define(  string  resourceId,  string  requestType  [,  hash  settings  ]  ); • resourceId: Identifier string for the resource. • requestType: Type of data retreival method from the server • [settings]: A set of key/value pairs that relate to the requestType.

Slide 24

Slide 24 text

RALPH WHITBECK USAGE - DEFINE A RESOURCE amplify.request.define(  string  resourceId,  string  resource  ); • resourceId: Identifier string for the resource. • resource: Function to handle requests. Receives a hash of settings. • resourceId:  Identifier string for the resource. • data: Data provided by the user. • success: Callback to invoke on success. • error: Callback to invoke on error.

Slide 25

Slide 25 text

RALPH WHITBECK USAGE - REQUEST A RESOURCE amplify.request(  string  resourceId  [,  hash  data  [,  function  callback  ]]  ); • resourceId: Identifier string for the resource. • [data]: A set of key/value pairs of data to be sent to the resource. • [callback]: A function to invoke if the resource is retrieved successfully.

Slide 26

Slide 26 text

RALPH WHITBECK USAGE - REQUEST A RESOURCE amplify.request(  hash  settings  ); • settings: A set of key/value pairs of settings for the request. • resourceId: Identifier string for the resource. • data (optional): Data associated with the request. • success (optional): Function to invoke on success.

Slide 27

Slide 27 text

RALPH WHITBECK REQUEST DEFINITION //typically  used  for  ajax  requests amplify.request.define(  resourceId,  type,  [  settings  ]  ); amplify.request.define(  "customers.list",  "ajax",  { url:  "/customers/", dataType:  "json" }); amplify.request.define(  "customers.update",  "ajax",  { url:  "/customers/{id}", dataType:  "json", method:  "POST" });

Slide 28

Slide 28 text

RALPH WHITBECK REQUEST EXECUTION amplify.request(  "customers.update",  {  id:  42,  first_name:  "Alexander" },  function(  data  )  {  ...  }); amplify.request({ resourceId:  "customers.update", data:  { id:  42,  first_name:  "Alexander" }, success:  function(  data  )  {  ...  }, error:  function(  data  )  {  ...  } });

Slide 29

Slide 29 text

RALPH WHITBECK IN-MEMORY CACHING amplify.request.define(  "customers.list",  "ajax",  { url:  "/customers/", dataType:  "json", cache:  true }); amplify.request.define(  "customers.list",  "ajax",  { url:  "/customers/", dataType:  "json", cache:  30000 });

Slide 30

Slide 30 text

RALPH WHITBECK PERSISTENT CACHING amplify.request.define(  "customers.list",  "ajax",  { url:  "/customers/", dataType:  "json", cache:  "persist" }); amplify.request.define(  "customers.list",  "ajax",  { url:  "/customers/", dataType:  "json", cache:  { type:  "persist", expires:  5  *  60  *  1000 } });

Slide 31

Slide 31 text

RALPH WHITBECK CACHING REMINDERS • In-memory cache only persists for the length of the page load. • Navigate off or reload and the memory resets. • Persistent Caching requires amplify.store as it is used to store the data in local storage.

Slide 32

Slide 32 text

RALPH WHITBECK MORE FLEXIBILITY • Custom Request Types • OAUTH, Local Database, Online/Offline • Custom Decoders • Custom Cache Types • Custom Request Definitions

Slide 33

Slide 33 text

RALPH WHITBECK MOCKJSON JUMPSTART YOUR DEVELOPMENT WITH

Slide 34

Slide 34 text

RALPH WHITBECK MOCKJSON • https://github.com/mennovanslooten/mockJSON • Creates fake data objects based on mockJSON templates. • Using variable data from a MockJSON template keeps your data unpredictable enough to catch edge cases. • Simple API for generating data

Slide 35

Slide 35 text

RALPH WHITBECK ADDING MOCKJSON TO A MOCK var  shot_template  =  {    //Generate  between  6  and  9  shots.      "shots|6-­‐9":  [        {            title:  "@LOREM",            url:  "#",            image_teaser_url:  "mocks/placeholder.jpg"        }    ] }; amplify.request.define(  "shots",  function(  settings  )  {    //Run  the  template  and  pass  it  to  the  success    settings.success(  $.mockJSON.generateFromTemplate(  shot_template  )  ); });

Slide 36

Slide 36 text

RALPH WHITBECK VARIABLE REPLACEMENT • All variables in strings - specified as @VARIABLENAME - are auto replaced with random data from preset data stores. • Available out of the box. @NUMBER @LETTER_UPPER @LETTER_LOWER @MALE_FIRST_NAME @FEMALE_FIRST_NAME @LAST_NAME @EMAIL @DATE_YYYY @DATE_DD @DATE_MM @TIME_HH @TIME_MM @TIME_SS @LOREM @LOREM_IPSUM

Slide 37

Slide 37 text

RALPH WHITBECK CUSTOM VARIABLE DATA $.mockJSON.data.PLACEHOLDER  =  [    “placeholder”,    “placeholder-­‐2” ]; var  shot_template  =  {    //Generate  between  6  and  9  shots.      "shots|6-­‐9":  [        {            title:  "@LOREM",            url:  "#",            image_teaser_url:  "mocks/@PLACEHOLDER.jpg"        }    ] };

Slide 38

Slide 38 text

RALPH WHITBECK TODO APP EXAMPLE TIME FOR THE MANDATORY

Slide 39

Slide 39 text

RALPH WHITBECK SAMPLE CODE • Github: http://github.com/RedWolves/amplify-todo

Slide 40

Slide 40 text

RALPH WHITBECK THANK YOU • Ralph Whitbeck • Email: [email protected] • twitter: @RedWolves • Web: http://ralphwhitbeck.com