Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Future of Rails - Take 2

The Future of Rails - Take 2

The 2nd version of my talk on the Future of Rails. A more streamlined version.

Ryan Bigg

May 10, 2018
Tweet

More Decks by Ryan Bigg

Other Decks in Programming

Transcript

  1. Mentor / Author / Developer

    View Slide

  2. FUTURE PREDICTIONS
    ARE OFTEN WRONG

    View Slide

  3. ISN’T RAILS
    THE FUTURE OF RAILS
    AS YOU KNOW IT TODAY

    View Slide

  4. TO KNOW THE FUTURE
    LOOK TO THE PAST

    View Slide

  5. APIs

    View Slide

  6. APPLICATION
    PROGRAMMING
    INTERFACE

    View Slide

  7. APIs
    ARE HOW PROGRAMS
    TALK TO EACH OTHER

    View Slide

  8. Your App
    API
    Third
    Party
    App

    View Slide

  9. APIs
    ARE AN AGREED CONTRACT

    View Slide

  10. Your App
    Third
    Party
    App
    API
    “Can you give me data
    about employees?”

    View Slide

  11. API
    “Sure, here’s my data”
    Third
    Party
    App
    Your App

    View Slide

  12. SOAP

    View Slide

  13. “Please send me all your
    employee data”
    In the past…
    (1998)
    SOAP APIs

    View Slide

  14. encoding='UTF-8'?>





    In the past…
    (1998)
    SOAP APIs

    View Slide

  15. --uuid:1fe211a2-9207-4981-b1ba-95c51dc9dadd
    Content-Type: text/xml

    --uuid:1fe211a2-9207-4981-b1ba-95c51dc9dadd
    Content-Id:
    Content-Type: application/octet-stream
    Content-Transfer-Encoding: binary
    "User/Employee ID","First Name","Employment Details Hire
    Date","Username","Division","Company
    Country","Location","Department","Cost
    Center","Team","Supervisor","Manager User Sys ID","Contract
    Type","Gender"
    --uuid:1fe211a2-9207-4981-b1ba-95c51dc9dadd--
    In the past…
    (1998)
    SOAP APIs

    View Slide

  16. --uuid:1fe211a2-9207-4981-b1ba-95c51dc9dadd
    Content-Type: text/xml

    --uuid:1fe211a2-9207-4981-b1ba-95c51dc9dadd
    Content-Id:
    Content-Type: application/octet-stream
    Content-Transfer-Encoding: binary
    "User/Employee ID","First Name","Employment Details Hire
    Date","Username","Division","Company
    Country","Location","Department","Cost
    Center","Team","Supervisor","Manager User Sys ID","Contract
    Type","Gender"
    --uuid:1fe211a2-9207-4981-b1ba-95c51dc9dadd--
    SOAP APIs In the past…
    (1998)

    View Slide

  17. SOAP
    SIMPLE

    View Slide

  18. Retrieved: Tuesday, 8th May,
    2018.
    --uuid:1fe211a2-9207-4981-b1ba-95c51dc9dadd
    Content-Type: text/xml

    --uuid:1fe211a2-9207-4981-b1ba-95c51dc9dadd
    Content-Id:
    Content-Type: application/octet-stream
    Content-Transfer-Encoding: binary
    "User/Employee ID","First Name","Employment Details Hire
    Date","Username","Division","Company
    Country","Location","Department","Cost
    Center","Team","Supervisor","Manager User Sys ID","Contract
    Type","Gender"
    --uuid:1fe211a2-9207-4981-b1ba-95c51dc9dadd--

    View Slide

  19. SOAP
    IS NOT A GOOD API

    View Slide

  20. Q: “DO YOU
    KNOW SOAP?”
    A: NOPE NOPE NOP

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. JSON
    IS GOOD

    View Slide

  26. [
    {
    "User/Employee ID": "ryan001",
    "First Name": "Ryan",
    "Username": "ryanbigg",
    . . .
    }
    . . .
    ]
    And then…
    (circa 2001)

    View Slide

  27. JSON
    JAVASCRIPT

    View Slide

  28. JSON
    Third
    Party
    App
    Your App
    “Can you give me data
    about employees?”

    View Slide

  29. JSON
    “Sure, here’s my data”
    Third
    Party
    App
    Your App
    [
    {
    "User/Employee ID": "ryan001",
    "First Name": "Ryan",
    "Username": "ryanbigg",
    . . .
    }
    . . .
    ]

    View Slide

  30. HAPPENED
    THEN RAILS
    HAPPENED

    View Slide

  31. A browser
    JavaScript,
    CSS,
    Images,
    and Rails
    The
    Monolith
    And then
    and then
    (circa 2011)
    Database
    Makes your app
    look great
    Makes your app
    do stuff

    View Slide

  32. A browser
    React App
    Frontend
    App
    Backend
    App
    Now…
    (2018)
    The
    Duolith
    Database
    Rails App

    View Slide

  33. A browser
    React App
    Frontend
    App
    Backend
    App
    Now…
    (2018)
    Database
    Rails App
    Makes your app
    look great
    Makes your app
    do stuff

    View Slide

  34. A browser
    React App
    Frontend
    App
    Backend
    App
    Now…
    (2018)
    Database
    Rails App
    SeparaEon
    of
    Concerns

    View Slide

  35. Rails Apps
    In the past

    View Slide

  36. Rails Apps
    Now

    View Slide

  37. A browser
    React App
    Frontend
    App
    Backend
    App
    The
    Duolith
    Database
    Rails App
    Now…
    (2018)

    View Slide

  38. A browser
    Frontend
    App
    Backend
    App
    “Views”, CSS, JS, etc.
    Controllers, models, etc.
    React App
    Database
    Rails App
    Now…
    (2018)

    View Slide

  39. HOW
    DO
    THESE
    THINGS

    TALK
    ?
    A browser
    React App
    ???
    Database
    Rails App

    View Slide

  40. APIs
    ARE HOW PROGRAMS
    TALK TO EACH OTHER
    Slide #7:

    View Slide

  41. A browser
    React App
    JSON API
    Recently…
    Database
    Rails App

    View Slide

  42. A browser
    React App “Show me a post”
    Recently…
    Database
    Rails App

    View Slide

  43. A browser
    React App
    “Okay, here’s
    the post”
    Recently…
    Database
    Rails App

    View Slide

  44. JSON APIs
    POST
    COMMENT #1
    COMMENT #2
    GET /api/posts/1
    GET /api/posts/1/comments

    View Slide

  45. GET /api/posts/1
    {
    "id": 1,
    "title": "Hello World",
    "body": "This is my blog's first post."
    "author": "Ryan Bigg"
    }
    JSON APIs

    View Slide

  46. GET /api/posts/1/comments
    [
    {
    text: "Great first post!",
    by: "Totally not Ryan"
    },
    ...
    ]
    JSON APIs

    View Slide

  47. A browser
    React App
    /api/posts/:id
    /api/comments

    Currently…
    JSON APIs
    Need to build lots of these…
    Database
    Rails App
    /api/posts

    View Slide

  48. EVERYONE
    DOES THIS

    View Slide

  49. EVEN
    FACEBOOK

    View Slide

  50. WELL…
    THEY DID

    View Slide

  51. GET /api/posts/1
    {
    "id": 1,
    "title": "Hello World",
    "body": "This is my blog's first post."
    "author": "Ryan Bigg"
    }
    JSON APIs Problem #1

    View Slide

  52. GET /api/posts/1
    {
    "id": 1,
    "title": "Hello World",
    "body": "This is my blog's first post."
    "author": "Ryan Bigg”,
    “comments”: [
    {
    “id”: 1,
    ...
    }
    ]
    }
    JSON APIs Problem #2

    View Slide

  53. JSON APIs
    POST
    COMMENT #1
    COMMENT #2
    GET /api/posts/1
    GET /api/posts/1/comments

    View Slide

  54. Facebook
    iOS App
    Facebook
    Servers
    1. Get news feed items
    2. Here are your items
    3. Get comments
    4. Here are the comments
    5. Fetch user data
    6. Here are the users

    View Slide

  55. JSON
    IS GOOD
    BUT WE CAN DO BETTER

    View Slide

  56. View Slide

  57. /graphql
    Now
    (and the future)
    Only one
    endpoint
    (born 2012)
    Database
    Rails App
    A browser
    React App

    View Slide

  58. Fetching a Post
    query postQuery {
    post(id: 1) {
    id
    title
    body
    author
    }
    }
    {
    "data": {
    "post": {
    "id": 1,
    "title": "Hello World",
    "body": "First post!”,
    "author": "Ryan Bigg",
    }
    }
    }
    Query Response
    GRAPHQL

    View Slide

  59. query postQuery {
    post(id: 1) {
    id
    title
    body
    author
    }
    }
    {
    "data": {
    "post": {
    "id": 1,
    "title": "Hello World",
    "author": "Ryan Bigg",
    }
    }
    }
    Query Response
    GRAPHQL Ignoring a field

    View Slide

  60. Post + Comments
    query postQuery {
    post(id: 1) {
    id
    title
    body
    author
    comments {
    text
    by
    }
    }
    }
    {
    "data": {
    "post": {
    "id": 1,
    "title": "Hello World",
    "body": "First post!”,
    "author": "Ryan Bigg",
    "comments": [
    {
    text: "Great first post!",
    by: "Totally not Ryan"
    },
    ...
    ]
    }
    }
    }
    Query Response
    GRAPHQL

    View Slide

  61. GRAPHQL
    POST
    COMMENT #1
    COMMENT #2
    POST /graphql

    View Slide

  62. query postQuery {
    ...
    }
    query commentQuery {
    comment(id: 1) {
    text
    user
    }
    }
    {
    "data": {
    “post”: {
    ...
    },
    “comment”: {
    text: "Great first post!",
    user: "Totally not Ryan”
    }
    }
    }
    Query Response
    GRAPHQL Two queries
    at the same Eme

    View Slide

  63. Facebook
    iOS App
    Facebook
    Servers
    1. Get news feed items,
    their comments and
    their users
    2. Here’s everything

    View Slide

  64. GRAPHQL
    IS BEST

    View Slide

  65. ISN’T RAILS
    THE FUTURE OF RAILS
    AS YOU KNOW IT TODAY

    View Slide

  66. Rails Apps
    Now

    View Slide

  67. The future…
    A browser
    React App
    Frontend
    App
    Backend
    App
    Database
    Rails App

    View Slide

  68. ✉: [email protected]
    Thanks!
    : @ryanbigg
    ▶: hIp:/
    /bit.ly/radar-for

    View Slide

  69. hIps:/
    /developer.github.com/v3/
    API Examples
    REST + JSON
    hIps:/
    /developer.github.com/v4/
    GRAPHQL

    View Slide

  70. hIps:/
    /www.howtographql.com/
    Learn these:
    GraphQL
    hIps:/
    /reactjs.org/tutorial/tutorial.html
    React

    View Slide

  71. hIps:/
    /www.sandimetz.com/99boIles/
    Read these:
    99 BOTTLES
    hIps:/
    /www.poodr.com
    PRACTICAL OBJECT-ORIENTED DESIGN IN RUBY

    View Slide

  72. hIps:/
    /bit.ly/exploding-rails-talk
    hIps:/
    /speakerdeck.com/radar/exploding-rails
    hIps:/
    /leanpub.com/exploding-rails
    Exploding Rails

    hIps:/
    /github.com/radar/twist-v2
    MY EXAMPLE APPLICATION

    View Slide