let's do spa

38
LET'S DO SPA MAREK PIASECKI

Upload: marek-piasecki

Post on 29-Nov-2014

41 views

Category:

Internet


0 download

DESCRIPTION

Presentation used on Polish RUGs about components and making SPA.

TRANSCRIPT

Page 1: Let's do SPA

LET'S DO SPAMAREK PIASECKI

Page 2: Let's do SPA

WHAT IS SPA?

Page 3: Let's do SPA

SINGLE PAGE APPLICATIONS

Page 4: Let's do SPA

TAKE CARE OF YOUR BACKBONE

Page 5: Let's do SPA

A COMPONENT

Knows how to display itself.

Knows how to behave.

Has configurable properties.

Page 6: Let's do SPA

EVERYTHING* IS A COMPONENT*that user sees and is interacting with

Page 7: Let's do SPA

REACT VS WEB COMPONENTS

Page 8: Let's do SPA

KEEP THE COMPONENT ABSTRACTION

KEEP THINGS TOGETHER

PROTIP #1

Page 9: Let's do SPA

BASE ON STATE

DON'T MODIFY DOM BY HAND

PROTIP #2

Page 10: Let's do SPA

MAKING COMPONENT ITERATIONS

1. Make component mockup with hardcoded state

2. Style component

3. Define interface actions

4. Provide endpoints - for data - for actions

Page 11: Let's do SPA

READING AND WRITING DATA

IS SOMETHING VERY DIFFERENT

PROTIP #3

Page 12: Let's do SPA

LAYOUT IS ALSO A COMPONENT

PROTIP #4

<HomeLayout> <TopBar /> <HomeStream /></HomeLayout>

children[0]

children[1]

Page 13: Let's do SPA

COMPLETE STRUCTURE FOR FRONTEND

components/

pages/

services/

mixins/

app.coffee

Page 14: Let's do SPA

GETTING DATA RAILS WAY

router controller serializer

DB

Page 15: Let's do SPA

GETTING DATA

serializer

DB

Page 16: Let's do SPA

GETTING DATA CONVENTIONS

match '/*path' => 'serializations/routing#router', via: :get

/endpoint/:id/endpoint/_/method

_ is a special sign

Serializer knows its scope.

Page 17: Let's do SPA

USE ATTRIBUTES FROM SERIALIZER

TO OPTIMIZE QUERY WITH SELECT

PROTIP #5

Page 18: Let's do SPA

DON'T USE PAGINATION

USE ORDER_QUERY

PROTIP #6

Page 19: Let's do SPA

DON'T NEST OBJECTS IN JSON

SEND RELATIONS ELEMENTS AS SEPARATE COLLECTIONS

PROTIP #7

Page 20: Let's do SPA

WRITING DATA CONVENTIONS

match '/*path' => 'actions#router', via: :post

/component_endpoint/action_name

class ComponentEndpoint

def action_name # do action end

end

Page 21: Let's do SPA

MY SERVICES

Page 22: Let's do SPA

DISPATCHER

@Dispatcher = _.extend {}, Events

Page 23: Let's do SPA

USE LOOSE COUPLING

PROTIP #8

Page 24: Let's do SPA

STORE

Store.update \ comments: { 123: { id: 123, body: 'Some comment.. .', author_ids: [1] }, author: { 1: { id: 1, name: 'Marek' } }

comment = Store.get comments: 123

author = Store.get(author: comment.author_ids)[0]

Page 25: Let's do SPA

MAKE SURE YOU HAVE ONLY ONE

INSTANCE OF PARTICULAR DATA IN THE APP

PROTIP #9

Page 26: Let's do SPA

ONE OBJECT

IS A SPECIAL CASE OF COLLECTION

PROTIP #10

Page 27: Let's do SPA

IT'S BETTER TO

HAVE DECORATORS IN THE FRONTEND

PROTIP #11

Page 28: Let's do SPA

ALIASES

dictionary: author: 'users'

Page 29: Let's do SPA

LCA

One render per Store update.

Page 30: Let's do SPA

Fetcher

Collects queries for API and sends it in one.

Page 31: Let's do SPA

MY MIXINS

Page 32: Let's do SPA

ACTIONS HANDLER

actions: local: change_tab: (tab) -> # . . . api: message_readed: (id) -> # . . . realtime: message_readed: (id) -> # . . .

Page 33: Let's do SPA

SCOPE

Keeps information about subset of Store collectionand listens for updates.

Page 34: Let's do SPA

API STATE COMPONENT

Pairs component with its API endpoint. It uses Scope.It's able to load more or newer elements of the collection.

Page 35: Let's do SPA

ASC SUPLEMENT

Asks for more data for an object. Cooperates with Fetcher.

Page 36: Let's do SPA

USE LO-DASH

INSTEAD OF UNDERSCORE

PROTIP #12

Page 37: Let's do SPA

IDENTITY FUNCTION FOR NIL

class NilClass def method_missing(*) self endend

BONUS PROTIP