Make it simple, keep it clean – The Idea – Get everything up and running

View Github Repository Open presentation in a new window

Bolza

See all presentation from Bolza

Make it simple, keep it clean – The Idea – Get everything up and running

0 0

webapp-like-lego

On Github Bolza / webapp-like-lego

Make it simple, keep it clean

Created by Stefano Sergio / @StefanoSergio

Let's Make A TV-Series Bookmarking & Discovery App

The Idea

The Hope

The Reality

Making a Mobile App the Modular Way

“Every program is a part of some other program and rarely fits.”
Alan J. Perlis

Which Lego Bricks do we need...

...to build this?

  • A List of Items
  • Actions on these list items
  • Search As You Type

Get everything up and running

Refuel.define('TVSApp',{require: ['GenericModule', 'DataSource']},
  function TVSApp() {  
    var app = Refuel.newModule('GenericModule', {
      root: document.querySelector("body"),
      autoload: true,
      modules: {
      	top: { 
      	  data: Refuel.newModule('DataSource', { url: 'http://...' }),
      	  rowStyle: ['series-row-A', 'series-row-B'] 
      	}
      }     
    });
}});

How we'd like to make a working list of shows

<ul class="series" data="PLEASE_TAKE_DATA_FROM_THIS_API">
  <li data="HEY_THIS_IS_THE_ITEM_TEMPLATE">
    <div class="view">
      <img class="left" src="MY_SHOW_IMAGE">
      <div class="title left">TITLE OF MY FAVOURITE SHOW</div>
      <button class="series-action plan">[ADD TO PLANNED SHOWS]</button>
    </div>
  </li>
</ul>

Creating a List of Shows with RefuelJS

<ul data-rf-list="top.results">
  <li data-rf-action="showZoom" class="{{user.status}}">
    <div class="view">
      <img class="left" data-src="{{thumb}}">
      <div class="title left">{{title}}</div>
      <button class="series-action plan" data-rf-action="plan"></button>
    </div>
  </li>
</ul>

Plan a show

function planShow(e) {
  var id = e.module.data.tvdb_id;
  var paramBody = {'tvdb_id': [id]};
  Refuel.ajax.post(url, JSON.stringify(paramBody), {
    successCallback: function(ev) {
      setLoadingState(ev.target, false);
    }
  });
};

Ok now, how do i bind the action to the button?

top.defineAction('plan', function(e) {
  planShow.call(this, e);
});

Google tell us what a "SayT" is

(aka Progressive Search)

Your search box will dynamically present suggestions and auto-complete queries before the user is even done typing! In fact, we've architected it in such a way that you can use Search-as-you-Type on any text input field!

Insert a SayT Module inside the Markup

<header id="saytbox" data-rf-sayt="searchSayt">
    <input type="search" autocomplete="on" placeholder="search shows">
    <span class="clear-search" data-rf-action="clearSayt"></span>
</header>

Configure the SayT Module

app = Refuel.newModule('GenericModule', {
  //...blablabla previous slides,
  searchSayt: {
    url: 'http://app.tvshowmark.it/api/v1/tvshow/jsearch/',
    dataPath: 'results',
    delay: 200,
    minChars: 2
  }
});

Done!

Ehy wait...

How can i see sayt results?

Adding a Lego Brick to our new Lego Brick!

Translated in RefuelJS language: We add a ListModule to the SaytModule

Module+Module = 

<header id="saytbox" data-rf-sayt="searchSayt">
  <!-- INPUT BOX IS HERE -->
  <ul data-rf-list="results" class="sayt-results">
    <li data-rf-template="show" data-rf-action-mousedown="showZoom"> 
      <div class="view"> <div class="title">{{title}}</div> </div>
    </li>
  </ul>
</header>

We done?

Of course not.

The story continues here...

Thanks you for your patience

@StefanoSergio on Twitter
Bolza on Github