Skip to content

Instantly share code, notes, and snippets.

@juanpaulo
Last active November 24, 2015 08:31
Show Gist options
  • Save juanpaulo/abeb4ce8a85a2d63762f to your computer and use it in GitHub Desktop.
Save juanpaulo/abeb4ce8a85a2d63762f to your computer and use it in GitHub Desktop.
Full Stack Toronto (Day 2)

The 3R stack - Building Real-time RESTful web apps with Node and React

Scott Persinger (@persingerscott)

Source: http://eventmobi.com/api/events/9565/documents/download/f59c9328-1526-4f7f-8d75-afc3e9db4906.pdf/as/The-3R-Stack.pdf

Traditional Web Apps

  • HTTP Request/Response

Dynamic Web Apps

  • HTTP Request/Response + AJAX

Why real-time?

  • Collaboration apps
  • Real-time monitoring
  • Eliminate polling

Real-time Apps

  • AJAX + Websocket "SUBSCRIBE" + Websocket PUSH

Rich-client Architecture

Application architecture

  • React + Redux + socket.io
  • Express + Mongoose + Mongo DB + Redis

The Flux architecture

  • How do I manage state in my app?
  • One way flow: Action creators -> store -> components -> DOM
  • Encapsulate state changes as “actions"

The reducer pattern

  • Reducers interpret actions to change the application state
  • Just a big switch statement
  • Actions are like the command pattern
  • Encapsulate state changes in a single place
  • The store is the state

Key insight - add "pub/sub" to REST

  • HTTP
    • Create - POST
    • Read - GET
    • Update - PATCH
    • Delete - DELETE
  • Websocket
    • Listen - SUBSCRIBE [event]
    • Event - PUBLISH

Real-time REST

  • All resource changes are published over the real-time channel to interested subscribers
  • Subscriptions are modeled with the resource path, like:
    • SUBSCRIBE /users - listen to changes to all users
    • SUBSCRIBE /users/1 - list to changes to user 1
  • Simplifies design of the event channel
    • Eliminates “ad-hoc message” pattern

Take-aways

  • Thick client + REST API is a very nice separation of concerns, but more work than MVC
  • React/Flux/Redux stack is quite complicated, especially JSX
  • Real-time isn’t free
    • Puts query/serialization load on the backend
  • But it’s a great user experience!

The Hacker's Bio: World Premiere at #fstoconf15

Ahmad Nassri (@AhmadNassri)

Source: http://slides.com/ahmadnassri/hacker-bio-fstoconf15-15#/

"The hacker culture is a subculture of individuals who enjoy the intellectual challenge of creatively overcoming and circumventing limitations of systems to achieve novel and clever outcomes." - Gehring, Verna

  • We are hackers
  • Change the world through technology
  • Why is this important?

"29 million ICT-skilled workers in the world, including 11 million professional developers."

  • Equally distributed around the world
  • Why is this important?
  • The project HACKER:BIO

Enabling Autonomy

Ian Livingstone (@ianlivingstone)

Source: http://eventmobi.com/api/events/9565/documents/download/c48dea8d-e830-4e46-ad3a-28a70ab24eec.pdf/as/enabling%20autonomy%20-%20no%20notes.pdf

  • How can we be more productive and build better products
  • Building software is a team sport
    • A product is the emergent result of a team working together over a period of time
  • Innovation = Adaptability * Creativity
  • Drastic shifts in the last 100 years factory to office
  • Software development is new we built on the past
  • So what do we want? (see Dan Pink: the puzzle of motivation)
    • Autonomy
    • Mastery
    • Purpose
    • Engagement
  • Daniel Pink - Autonomy, Mastery & Purpose
  • Control leads to compliance; autonomy leads to engagement
  • Requires us to change how we organize and operate
  • Teams are lego blocks
  • They are our functional unit of production
    • Scale up
    • Evaluate ideas
    • Create redundancy
  • How can teams be more productive?

Localize Authority and Responsibility

Define clear areas of responsibility with depth

  • Clear vision
  • Defined interface
  • Autonomy

Lead, don't manage

  • Articulate vision
  • Guide direction
  • Measure results

Embrace transparency

  • Asynchronous
  • Clear objectives
  • Embrace failure

Breakdown Functional Silos

Build Platforms

  • Git, CI, issues
  • Frontend, mobile
  • Services
  • Compute, deploy, monitoring

Cross layer project teams

  • Occassionally, not regularly
  • Helps cross pollinating knowledge

Focus on development flow - ideation to deployment

  • Roadmap <> Backlog <> Dev <> Prod (loop)

Automation is the rule of law

  • Automated CI
  • Deployment
  • Monitoring

Built in knowledge dissemination

  • Development begins > Planning > Implementation <> Testing > Shipped

Duplication is okay - that's not the primary concern

  • We often focus on building the perfect code bases
  • We try to have one way of doing things
  • This is important, but don't attempt to control it through your org chart
  • Build a culture of eventual alignment and executing on your vision

Focus on Team Dynamics

Strongly connected communication graph

When you're finished changing, you're finished. -Benjamin Franklin

Data Visualization in Practice

Rami Sayar (@ramisayar)

Edward Tufte

Source: http://www.slideshare.net/ramisayar/fitc-data-visualization-in-practice-42809637

What is not Data Visualization?

"The purpose of visualization is insight, not pictures" -Ben Shneiderman

Why should you care? BIG DATA.

Principle 1 - Context is King

Principle 2 - Visualizations Must Match Data

Principle 3 - Escape Flatland

Principle 4 - Show Your Work

Principle 5 - Insights from Hay Bales

Books + Websites + Conferences

Books

  • Anything by Edward Tufte
  • Knowledge/Information is Beautiful
  • Designing News by Franchi

Conferences

  • Visualized in NYC

Websites

  • informationisbeautiful.net
  • flowingdata.com
  • visualizing.org
  • ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment