7 ms·

Trello clone with Phoenix and React – 5-part tutorial

249 points by tortilla 11y ago

tortilla 11y ago
Source code: https://github.com/bigardone/phoenix-trello https://github.com/bigardone/phoenix-trello Live demo: https://phoenix-trello.herokuapp.com/ https://phoenix-trello.herokuapp.com/ part 2: https://blog.diacode.com/trello-clone-with-phoenix-and-react-pt-2 https://blog.diacode.com/trello-clone-with-phoenix-and-react... part 3: https://blog.diacode.com/trello-clone-with-phoenix-and-react-pt-3 https://blog.diacode.com/trello-clone-with-phoenix-and-react... part 4: https://blog.diacode.com/trello-clone-with-phoenix-and-react-pt-4 https://blog.diacode.com/trello-clone-with-phoenix-and-react... part 5: https://blog.diacode.com/trello-clone-with-phoenix-and-react-pt-5 https://blog.diacode.com/trello-clone-with-phoenix-and-react... part 6: coming soon
- deleted 11y ago
  [deleted]
  - tortilla 11y ago
    I didn't write the tutorials, but this guy did: https://twitter.com/bigardone https://twitter.com/bigardone
javiercr 11y ago
Diacode team here. Thank you for sharing the post. This article is part of an ongoing series of blog posts that covers the whole Trello clone / tribute that our colleague @bigardone did. We didn't submitted it to HN before because we were waiting to complete the whole thing and create a proper index for all the articles. The part 6 will be published tomorrow and you can expect a few more articles in the next weeks. I'd like to clarify that this is not a product, it doesn't cover all the awesome features that Trello has. It's just a learning experiment that we're sharing with the rest of the world. Finally, to give you some background, we're a small Rails dev shop (5 guys) who works remotely. We're now playing with Elixir and Phoenix and having a lot of fun with it. I'd totally recommend any dev to play with Elixir, specially if you come from a Rails background. Kudos to our colleague @bigardone for putting all of this together.
- reustle 11y ago
  Nice work on the post! Off topic, but I wanted to put out that the "Work with us" button at the bottom of that page doesn't work.
  - javiercr 11y ago
    Ops! Thank you very much, it's fixed now :) By the way, our whole site and blog is on GitHub, so if any of you guys want to contribute to any of the articles feel free to drop us a PR :) https://github.com/diacode/diacode-website https://github.com/diacode/diacode-website
- javiercr 11y ago
  We just added the table of contents with links to all the articles to make it easier to navigate. You may need to do a page refresh to see it.
  - nacs 11y ago
    It would be good to add a "Next" link at the bottom of each part to go to the next part so people can click through instead of having to scroll to the top after reading each time.
- aczerepinski 11y ago
  I'm interested in learning React, but brand new to front-end tooling (npm/webpack/etc). When doing this tutorial I got derailed by npm start, and the host of errors it led me through. Does anyone have any advice for learning the tooling pre-requisites that go along with React development? I'm happy to buy books, pay for courses, whatever it takes.
d1ffuz0r 11y ago
Why do you need Elixir for building this kind of project? Any real benefits?
- quaunaut 11y ago
  "Need" is always such a strong word, but Phoenix is particularly well-suited to real-time applications, and can scale pretty ridiculously off of them. Not to mention, Elixir is a joy to code in, and a lot of us are still experimenting with it, trying to figure out where it's going. So projects like this are a good outlet.
- tvmalsv 11y ago
  I haven't hit their site yet, but I don't think they're saying you need Elixir to build this kind of project. I think it's more along the lines of needing Elixir to build a tutorial series for Elixir. As for the benefits of using Elixir, I'm not qualified to answer that since I've only skimmed the surface of what Elixir is (but it looks intriguing!).
- gjkood 11y ago
  Elixir compiles to bytecode for the Erlang VM/BEAM. Erlang + OTP = scalable/fault-tolerant distributed systems. Phoenix is closely coupled with OTP. Not sure if Trello itself requires it or benefits from it, but any distributed system can benefit from this architecture.
- tvon 11y ago
  This use of "need" makes me wonder what the earliest tech is that you could use to build a trello-ish. I'm thinking it's doable with C, CGI, and xmlhttprequest....
  - thameera 11y ago
    Or a more closer-to-the-metal solution like Node.js? Joking aside, I wonder if it's possible to write a real-time webapp with C and CGI. Ok, 'possible' is a strong word; but I'd really like to hear from someone who'd given this a try.
Omnipresent 11y ago
I'm more interested in the React part of this tutorial. If the backend was swapped with another framework. can the tutorial still be followed to learn React?
- burger_moon 11y ago
  I just finished going through this http://survivejs.com/webpack_react/introduction/ http://survivejs.com/webpack_react/introduction/ whole thing building a kanban board using react and altjs. It was really interesting, though a much simpler version of what was posted in the OP I learned a lot about webpack and react, and got to try a different flavor of flux I hadn't experimented with before (alt.js). I'm excited to dive into the OPs tutorial however. It looks really interesting.
dwarner 11y ago
I'm trying to work out how apps like this and trello calculate and store card poisition with as little overhead as possible. It seems obvious that every time you move a card to a column, you recalculate the order of every card, however that has overhead because you have to send the new order of every card to the server. Is there a more efficient way to solve this problem? It seems to me it would be more efficient to assign a position value for only the card you are moving relative to those before and after it. I'm sure trello has solved this
- totallymike 11y ago
  You might be able to watch the network tab in the chrome developer tools to see what they send back and forth. Trello also has an api that may prove illustrative.
- tortilla 11y ago
  Take a look at this Rails gem, https://github.com/mixonic/ranked-model/ https://github.com/mixonic/ranked-model/ It's a bit more efficient than traditional ordering... From the readme: ranked-model is also optimized to write to the database as little as possible: ranks are stored as a number between -8388607 and 8388607 (the MEDIUMINT range in MySQL)
- thedufer 11y ago
  Trello gives each card a `pos` attribute, which is simply a double (64-bit float). When the first card in a list is created, it is given a `pos` of 16384. When a card is added to the end of a list it is given <pos of last card> + 16384. If added to the beginning, it is given <pos of first card> / 2. If inserted between two cards, it is simply the average of the two neighbors. Finally, if two cards end up with values too close together (just some magic number - .0001 apart or something) then those cards and some nearby are all re-numbered. This means that most of the time you only have to update a single card. In degenerate movement cases, you might update up to an entire list, but that can only happen every so many moves (~20 or so, but depends on exact values) even in the worst case.
  - strmpnk 11y ago
edwinnathaniel 11y ago
Looks really cool except Part 2 where the ceremonious setup for the front-end part really point out the issue with JS right now. Other than that, great work!
hakanderyal 11y ago
That's a really informative tutorial series. A tip to everyone checking the codebase (JS parts) to learn about building a Trello-like application, there isn't any optimistic UI updates in this tutorial app. (eg. after dragging a card to another list, displaying the card at the dragged position before receiving confirmation from the server.) When you add optimistic updates to the mix with real time updates, things get much more complicated. Tracking pending updates, rolling back when something goes wrong, ordering of updates, reconciliation with server when the client is missing some updates etc. I'm building something similar, and these have been most time consuming parts to build in a reliable way.
- tomjen3 11y ago
  Thats one of the really nice things about react: you can update the state on the clients copy of the board data, let react change the UI as required, then let the server send over the new state once it has one, update the clients state as required and let react deal with the ui updates. As for reconcillation I would probably just have the server send over the entire current state of the board when the client connects. It is much easier and doesn't waste that much bandwidth, which is cheap anyhow. Am I missing something?
  - hakanderyal 11y ago
    The 'happy path' (everything goes right) is easy, as you said. The hard part for me was making sure the state in the client is always in sync with server, in a valid state, even when things go wrong. On a slow connection, another update made by someone else to board may arrive between the optimistic client update and the server confirmation, which can lead to a broken state on client. Or, user may do an update on the optimistically added card, like editing, while the first action is not confirmed by the server yet. You either need to queue these actions, or generate the id of the card on client side. And you need to have reliable 'rollbacks' on the client when server rejects the action for some reason. There are many more edge cases like that. I've solved all these problems eventually, but it took much more time for me than building the happy path.
    - 11y ago
wildmXranat 11y ago
Really nice. I wondered how an elixir app can be designed and this is a cool resource to use.
jbhatab 11y ago
Thank you so much. Been doing lots of phoenix+react and blogs like this are a tremendous help to the community.

249 points by tortilla 11y ago

Source code: https://github.com/bigardone/phoenix-trello https://github.com/bigardone/phoenix-trello Live demo: https://phoenix-trello.herokuapp.com/ https://phoenix-trello.herokuapp.com/ part 2: https://blog.diacode.com/trello-clone-with-phoenix-and-react-pt-2 https://blog.diacode.com/trello-clone-with-phoenix-and-react... part 3: https://blog.diacode.com/trello-clone-with-phoenix-and-react-pt-3 https://blog.diacode.com/trello-clone-with-phoenix-and-react... part 4: https://blog.diacode.com/trello-clone-with-phoenix-and-react-pt-4 https://blog.diacode.com/trello-clone-with-phoenix-and-react... part 5: https://blog.diacode.com/trello-clone-with-phoenix-and-react-pt-5 https://blog.diacode.com/trello-clone-with-phoenix-and-react... part 6: coming soon

deleted 11y ago
[deleted]
- tortilla 11y ago
  I didn't write the tutorials, but this guy did: https://twitter.com/bigardone https://twitter.com/bigardone

javiercr 11y ago

Diacode team here. Thank you for sharing the post. This article is part of an ongoing series of blog posts that covers the whole Trello clone / tribute that our colleague @bigardone did. We didn't submitted it to HN before because we were waiting to complete the whole thing and create a proper index for all the articles. The part 6 will be published tomorrow and you can expect a few more articles in the next weeks. I'd like to clarify that this is not a product, it doesn't cover all the awesome features that Trello has. It's just a learning experiment that we're sharing with the rest of the world. Finally, to give you some background, we're a small Rails dev shop (5 guys) who works remotely. We're now playing with Elixir and Phoenix and having a lot of fun with it. I'd totally recommend any dev to play with Elixir, specially if you come from a Rails background. Kudos to our colleague @bigardone for putting all of this together.

reustle 11y ago
Nice work on the post! Off topic, but I wanted to put out that the "Work with us" button at the bottom of that page doesn't work.
- javiercr 11y ago
  Ops! Thank you very much, it's fixed now :) By the way, our whole site and blog is on GitHub, so if any of you guys want to contribute to any of the articles feel free to drop us a PR :) https://github.com/diacode/diacode-website https://github.com/diacode/diacode-website
javiercr 11y ago
We just added the table of contents with links to all the articles to make it easier to navigate. You may need to do a page refresh to see it.
- nacs 11y ago
  It would be good to add a "Next" link at the bottom of each part to go to the next part so people can click through instead of having to scroll to the top after reading each time.
aczerepinski 11y ago
I'm interested in learning React, but brand new to front-end tooling (npm/webpack/etc). When doing this tutorial I got derailed by npm start, and the host of errors it led me through. Does anyone have any advice for learning the tooling pre-requisites that go along with React development? I'm happy to buy books, pay for courses, whatever it takes.

d1ffuz0r 11y ago

Why do you need Elixir for building this kind of project? Any real benefits?

quaunaut 11y ago
"Need" is always such a strong word, but Phoenix is particularly well-suited to real-time applications, and can scale pretty ridiculously off of them. Not to mention, Elixir is a joy to code in, and a lot of us are still experimenting with it, trying to figure out where it's going. So projects like this are a good outlet.
tvmalsv 11y ago
I haven't hit their site yet, but I don't think they're saying you need Elixir to build this kind of project. I think it's more along the lines of needing Elixir to build a tutorial series for Elixir. As for the benefits of using Elixir, I'm not qualified to answer that since I've only skimmed the surface of what Elixir is (but it looks intriguing!).
gjkood 11y ago
Elixir compiles to bytecode for the Erlang VM/BEAM. Erlang + OTP = scalable/fault-tolerant distributed systems. Phoenix is closely coupled with OTP. Not sure if Trello itself requires it or benefits from it, but any distributed system can benefit from this architecture.
tvon 11y ago
This use of "need" makes me wonder what the earliest tech is that you could use to build a trello-ish. I'm thinking it's doable with C, CGI, and xmlhttprequest....
- thameera 11y ago
  Or a more closer-to-the-metal solution like Node.js? Joking aside, I wonder if it's possible to write a real-time webapp with C and CGI. Ok, 'possible' is a strong word; but I'd really like to hear from someone who'd given this a try.

Omnipresent 11y ago

I'm more interested in the React part of this tutorial. If the backend was swapped with another framework. can the tutorial still be followed to learn React?

burger_moon 11y ago
I just finished going through this http://survivejs.com/webpack_react/introduction/ http://survivejs.com/webpack_react/introduction/ whole thing building a kanban board using react and altjs. It was really interesting, though a much simpler version of what was posted in the OP I learned a lot about webpack and react, and got to try a different flavor of flux I hadn't experimented with before (alt.js). I'm excited to dive into the OPs tutorial however. It looks really interesting.

dwarner 11y ago

I'm trying to work out how apps like this and trello calculate and store card poisition with as little overhead as possible. It seems obvious that every time you move a card to a column, you recalculate the order of every card, however that has overhead because you have to send the new order of every card to the server. Is there a more efficient way to solve this problem? It seems to me it would be more efficient to assign a position value for only the card you are moving relative to those before and after it. I'm sure trello has solved this

totallymike 11y ago
You might be able to watch the network tab in the chrome developer tools to see what they send back and forth. Trello also has an api that may prove illustrative.
tortilla 11y ago
Take a look at this Rails gem, https://github.com/mixonic/ranked-model/ https://github.com/mixonic/ranked-model/ It's a bit more efficient than traditional ordering... From the readme: ranked-model is also optimized to write to the database as little as possible: ranks are stored as a number between -8388607 and 8388607 (the MEDIUMINT range in MySQL)
thedufer 11y ago
Trello gives each card a `pos` attribute, which is simply a double (64-bit float). When the first card in a list is created, it is given a `pos` of 16384. When a card is added to the end of a list it is given <pos of last card> + 16384. If added to the beginning, it is given <pos of first card> / 2. If inserted between two cards, it is simply the average of the two neighbors. Finally, if two cards end up with values too close together (just some magic number - .0001 apart or something) then those cards and some nearby are all re-numbered. This means that most of the time you only have to update a single card. In degenerate movement cases, you might update up to an entire list, but that can only happen every so many moves (~20 or so, but depends on exact values) even in the worst case.
- strmpnk 11y ago

edwinnathaniel 11y ago

Looks really cool except Part 2 where the ceremonious setup for the front-end part really point out the issue with JS right now. Other than that, great work!

hakanderyal 11y ago

That's a really informative tutorial series. A tip to everyone checking the codebase (JS parts) to learn about building a Trello-like application, there isn't any optimistic UI updates in this tutorial app. (eg. after dragging a card to another list, displaying the card at the dragged position before receiving confirmation from the server.) When you add optimistic updates to the mix with real time updates, things get much more complicated. Tracking pending updates, rolling back when something goes wrong, ordering of updates, reconciliation with server when the client is missing some updates etc. I'm building something similar, and these have been most time consuming parts to build in a reliable way.

tomjen3 11y ago
Thats one of the really nice things about react: you can update the state on the clients copy of the board data, let react change the UI as required, then let the server send over the new state once it has one, update the clients state as required and let react deal with the ui updates. As for reconcillation I would probably just have the server send over the entire current state of the board when the client connects. It is much easier and doesn't waste that much bandwidth, which is cheap anyhow. Am I missing something?
- hakanderyal 11y ago
  The 'happy path' (everything goes right) is easy, as you said. The hard part for me was making sure the state in the client is always in sync with server, in a valid state, even when things go wrong. On a slow connection, another update made by someone else to board may arrive between the optimistic client update and the server confirmation, which can lead to a broken state on client. Or, user may do an update on the optimistically added card, like editing, while the first action is not confirmed by the server yet. You either need to queue these actions, or generate the id of the card on client side. And you need to have reliable 'rollbacks' on the client when server rejects the action for some reason. There are many more edge cases like that. I've solved all these problems eventually, but it took much more time for me than building the happy path.
  - 11y ago

wildmXranat 11y ago

Really nice. I wondered how an elixir app can be designed and this is a cool resource to use.

jbhatab 11y ago

Thank you so much. Been doing lots of phoenix+react and blogs like this are a tremendous help to the community.