Let's do SPA

  • View
    26

  • Download
    0

Embed Size (px)

DESCRIPTION

Presentation used on Polish RUGs about components and making SPA.

Text of Let's do SPA

  • 1. LET'S DO SPA MAREK PIASECKI
  • 2. WHAT IS SPA?
  • 3. SINGLE PAGE APPLICATIONS
  • 4. TAKE CARE OF YOUR BACKBONE
  • 5. A COMPONENT Knows how to display itself. Knows how to behave. Has configurable properties.
  • 6. EVERYTHING* IS A COMPONENT *that user sees and is interacting with
  • 7. REACT VS WEB COMPONENTS
  • 8. KEEP THE COMPONENT ABSTRACTION KEEP THINGS TOGETHER PROTIP #1
  • 9. BASE ON STATE DON'T MODIFY DOM BY HAND PROTIP #2
  • 10. MAKING COMPONENT ITERATIONS 1. Make component mockup with hardcoded state 2. Style component 3. Define interface actions 4. Provide endpoints - for data - for actions
  • 11. READING AND WRITING DATA IS SOMETHING VERY DIFFERENT PROTIP #3
  • 12. LAYOUT IS ALSO A COMPONENT PROTIP #4 children[0] children[1]
  • 13. COMPLETE STRUCTURE FOR FRONTEND components/ pages/ services/ mixins/ app.coffee
  • 14. GETTING DATA RAILS WAY router controller serializer DB
  • 15. GETTING DATA serializer DB
  • 16. GETTING DATA CONVENTIONS match '/*path' => 'serializations/routing#router', via: :get /endpoint/:id /endpoint/_/method _ is a special sign Serializer knows its scope.
  • 17. USE ATTRIBUTES FROM SERIALIZER TO OPTIMIZE QUERY WITH SELECT PROTIP #5
  • 18. DON'T USE PAGINATION USE ORDER_QUERY PROTIP #6
  • 19. DON'T NEST OBJECTS IN JSON SEND RELATIONS ELEMENTS AS SEPARATE COLLECTIONS PROTIP #7
  • 20. WRITING DATA CONVENTIONS match '/*path' => 'actions#router', via: :post /component_endpoint/action_name class ComponentEndpoint def action_name # do action end end
  • 21. MY SERVICES
  • 22. DISPATCHER @Dispatcher = _.extend {}, Events
  • 23. USE LOOSE COUPLING PROTIP #8
  • 24. 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]
  • 25. MAKE SURE YOU HAVE ONLY ONE INSTANCE OF PARTICULAR DATA IN THE APP PROTIP #9
  • 26. ONE OBJECT IS A SPECIAL CASE OF COLLECTION PROTIP #10
  • 27. IT'S BETTER TO HAVE DECORATORS IN THE FRONTEND PROTIP #11
  • 28. ALIASES dictionary: author: 'users'
  • 29. LCA One render per Store update.
  • 30. Fetcher Collects queries for API and sends it in one.
  • 31. MY MIXINS
  • 32. ACTIONS HANDLER actions: local: change_tab: (tab) -> # ... api: message_readed: (id) -> # ... realtime: message_readed: (id) -> # ...
  • 33. SCOPE Keeps information about subset of Store collection and listens for updates.
  • 34. API STATE COMPONENT Pairs component with its API endpoint. It uses Scope. It's able to load more or newer elements of the collection.
  • 35. ASC SUPLEMENT Asks for more data for an object. Cooperates with Fetcher.
  • 36. USE LO-DASH INSTEAD OF UNDERSCORE PROTIP #12
  • 37. IDENTITY FUNCTION FOR NIL class NilClass def method_missing(*) self end end BONUS PROTIP
  • 38. M.PIASECKI@PILOT.CO