10 ms·

Elixir web development 101: collaborative todolist with realtime updates

330 points by blaze33 9y ago

hn_hates_tor 9y ago
OT, but what software did you use to make those gifs on Ubuntu?
- blaze33 9y ago
  Hi, I used gtk-recordmydesktop (beware it will freeze your desktop under Ubuntu 17.10 Gnome but works fine under Unity). It gives you an .ogv file and then there's some editing to get a gif. I described the process at the end of: https://blog.openbloc.fr/javascript-es2015-starter-kit/ https://blog.openbloc.fr/javascript-es2015-starter-kit/ Mainly convert the .ogv to .mp4 with ffmpeg (don't have the command here), create a png palette from the video so your gif colors are more accurate and use ffmpeg to create the gif: ffmpeg -y -i video.mp4 -vf fps=10,scale=800:-1:flags=lanczos,palettegen palette.png ffmpeg -i video.mp4 -i palette.png -filter_complex 'fps=1,scale=800:-1:flags=lanczos,setpts=0.25*PTS[x];[x][1:v]paletteuse' todoApp.gif This gives you a 800px wide gif, with 1FPS, and sped up 4 times (setpts=0.25) :)
  - worble 9y ago
    Why make a gif from this rather than a webm (seeing as you obviously know what you're doing with ffmpeg)?
    - dagw 9y ago
      What does webm support look like these days? Last I checked neither Safari nor IE had webm support.
      - deleted 9y ago
        [deleted]
    - blaze33 9y ago
      The ghost blog allow me to directly upload images to my cdn, it's a little more work to publish a video and I was too tired when finishing this article yesterday to think of better options anyway :)
pmontra 9y ago
> channel.on('update:todo' ... > channel.push('delete:todo' ... > Have a CRUD interface over websocket REST over websockets. What's the advantage over HTTP? I know websockets allow for pushing data to clients, but this is pull so apparently there should be no advantage, only more code to write. Edit: maybe you're sharing updates among all the users connected to the server. Still, for sending requests HTTP is enough. Any performance advantage by using websockets?
- deleted 9y ago
  [deleted]
- ploggingdev 9y ago
  Websockets provide full-duplex communication channels over a single TCP connection without the overhead of a http request/response cycle. For realtime applications such as the one described in this post or for a chat application, there is a significant performance benefit over plain http. Maintaining open websocket connections is also very cheap in terms of memory used as well as cpu resources.
- ht85 9y ago
  Apart from the obvious push capabilities, yes, websocket has much less overhead and is faster than HTTPS. Once the connection is established, you can send requests starting at 1 byte size, whereas HTTP needs the full headers on every request. HTTPS also has a lot of handshake overhead, where you need 2-3 round trips per request instead of a single one with websocket. This can make a world of difference in a 150+ ping situation, where HTTP feels sluggish and websocket feels instant.
  - ammmir 9y ago
    actually, both HTTPS and WebSocket over TLS (wss://) require a TLS handshake, so it's not like you're constantly doing that after you've loaded the page, but HTTP request/response header sizes could def be a concern.
    - jeremyjh 9y ago
thejosh 9y ago
I really like absinthe with apollo/subscripions on the frontend for realtime updates.
bsaul 9y ago
Non-representative anecdote : i've recently heard of two teams that started using elixir, they both came from a ruby background, and in both case they weren't using OTP. They both justified using elixir because it was "closer to ruby" (???), and they both seemed to live a pretty difficult time with that language. Which makes me wonder : why would you ever want to use such a special language (purely functional isn't for everyone) if you don't have any scalability issue, and don't even use OTP ?
- gfiorav 9y ago
  People usually dive into Elixir expecting Ruby, but it’s a very different language. Most of this confusion comes from not wanting to sit down and read a good book about it. The only thing it takes from Ruby is variable and namespace naming (since José Valim was a ruby syntax enthusiast). Ruby syntax is good IMHO, but that’s not the only reason to go for Elixir (far from it). I recommend the book “Programming Elixir”. Even if you end up not picking the language, it makes a good point about how OOP is a natural enemy to concurrency (because of state) and about how transforming data (I.e functional) is a better match. The language runs atop the Erlang VM, which successfully navigated the troubles of concurrency in ISP nodes a long time ago. Again, worth a read.
- jeremyjh 9y ago
  There is a significant learning curve, but anyone can learn it. It is not much like Ruby, yet it captures much of the joy of programming in Ruby and is far better for structuring large programs. There is optional typing support through Dialyzer, but even without that the compiler will catch many mistakes that annoy me and slow down development in Ruby. Also - the performance can really make a perceptible difference in user experience even if you don't "need" the scalability.
- iaml 9y ago
  I'm guessing what they really meant is "it's close to rails" since the same people made both rails and phoenix AFAIK.
  - dudul 9y ago
Alexa_Anthony 9y ago
I really like absinthe with apollo/subscripions on the frontend for realtime updates.
Alexa_Anthony 9y ago
Does it generate real-time performances and analytics?
brightball 9y ago
If you're doing development with a web socket layer, it's entirely worth it to try out Phoenix Channels before you commit to another stack. It makes your life so much easier. There are a lot of other great reasons to use Elixir though.
- dontlikeitupem 9y ago
  The difficulty is finding good Dev teams building Elixir as Elixir and not second rate Ruby on Rails refugees looking for a faster Rails a-la Phoenix.
  - ch4s3 9y ago
    > and not second rate Ruby on Rails refugees looking for a faster Rails That's pretty harsh, and not at all true in my experience. There's a growing community and I had no trouble hiring two remote people. I ended up with a lot of qualified candidates. Moreover, a lot of great people came over from Rails. Jose and Chris McCord were both formerly Rails people.
  - brightball 9y ago
    The reason Elixir pulls people from Ruby is the language and community emphasis on developer productivity IMO. It’s the one thing that Ruby excels at so well it justifies using Ruby in the face of plenty of other “fast” options. Dev time and time to market are still infinitely more important than hosting costs unless you are already at scale. What Elixir brings to the table is the productivity and time to market with an architecture that scales for most every scenario experienced in server side dev aside from heavy math. And that architecture is designed in a way that makes maintainability a first class citizen because of the lack of long term dependency entanglement growth.
  - sergiotapia 9y ago
    That's why I love Phoenix Context's that were introduced in 1.3 - it allows you to really structure your code and not just throw everything in a "model" like in Rails.
  - Can_Not 9y ago
malloryerik 9y ago
How would you compare this with the same app done in Clojure? How would development and result be different?
cczomps 9y ago
Hello everyone,i would like to a help a friend who helped me get out of a dysfunctional and abusive relationship and helped me get proof of infidelity from my ex husband's devices.If you have a similar problem or you need to hack any device or website and you require 100% guarantee and anonymity, reach out to this computer guru via email with BLACKSPOTHACK @ GMAIL DOT COM
whalesalad 9y ago
I'm so excited about Elixir these days. I would love to see more cookbook examples of using Elixir but NOT as a Ruby/Rails replacement. While the concept is not new to me, I have recently become totally infatuated with the concept of green threads, actor models, etc... for dealing with concurrent processing. This is literally what Erlang was designed to do, and Elixir makes it user friendly. The real beauty of Elixir/Erlang is being able to run hundreds of thousands of concurrent "threads" (co-operative in userspace, not OS-level). Anyway I do not mean to detract from the post here -- just feel like a todo list is not a shining-star example of Elixir and would love to see some more hackers post their concurrency work here.
- brightball 9y ago
  For what it’s worth, the collaborative to do list is giving you an example of websockets with channels. Channels dedicates 3 server side processes per socket IIRC. One for the connection, one to supervise the connection and one to represent the user state for that connection. That’s only possible because of how cheap those Erlang/Elixir processes are. Because of that, just about any websocket example is a decent representation. Plus, when you really start thinking about how the entire platform is designed specifically for passing small messages around between process, websockets become an even better example since that’s exactly what they do with the browser. You enable passing small messages between millions of connected clients to a server side environment built for passing millions of small messages between clustered and horizontally scalable servers.
- jetti 9y ago
  >I would love to see more cookbook examples of using Elixir but NOT as a Ruby/Rails replacement. I would love to see more examples that get away from web dev with Elixir. While it's great with the Phoenix framework there is so much more to Elixir than that. Trying to deploy an elixir daemon has been a pain and I haven't found much around that. There is escript and distillery and while I haven't tried distillery for non-phoenix apps, escript works but deploying is still a pain.
  - passer-by-123 9y ago
ttrbls 9y ago
Elixir Deez Nutz
isuckatcoding 9y ago
I think as the tooling /IDE support for Elixir improves, so will adoption.
shadykiller 9y ago
Elixir is pure pleasure. Coming from a ruby background, I din't have huge difficulty in understanding the syntax, and unlike other functional languages like Clojure, it's not an abrupt change from procedural paradigm. You can still assign variables in functions etc.
- tytytytytytytyt 9y ago
  You can still 'assign variables in functions' in Clojure, afaik. Did you mean mutate existing variables?
- mischov 9y ago
  Elixir should absolutely be an abrupt change from the procedural paradigm, and much closer conceptually to Clojure than Ruby. In Clojure you can still stick something in an atom or volatile and easily update it in place... doing that is a lot more involved in Elixir.
- findjashua 9y ago
  I'm assuming, you meant `reassign` (aka rebind) variables?

330 points by blaze33 9y ago

hn_hates_tor 9y ago

OT, but what software did you use to make those gifs on Ubuntu?

blaze33 9y ago
Hi, I used gtk-recordmydesktop (beware it will freeze your desktop under Ubuntu 17.10 Gnome but works fine under Unity). It gives you an .ogv file and then there's some editing to get a gif. I described the process at the end of: https://blog.openbloc.fr/javascript-es2015-starter-kit/ https://blog.openbloc.fr/javascript-es2015-starter-kit/ Mainly convert the .ogv to .mp4 with ffmpeg (don't have the command here), create a png palette from the video so your gif colors are more accurate and use ffmpeg to create the gif: ffmpeg -y -i video.mp4 -vf fps=10,scale=800:-1:flags=lanczos,palettegen palette.png ffmpeg -i video.mp4 -i palette.png -filter_complex 'fps=1,scale=800:-1:flags=lanczos,setpts=0.25*PTS[x];[x][1:v]paletteuse' todoApp.gif This gives you a 800px wide gif, with 1FPS, and sped up 4 times (setpts=0.25) :)
- worble 9y ago
  Why make a gif from this rather than a webm (seeing as you obviously know what you're doing with ffmpeg)?
  - dagw 9y ago
    What does webm support look like these days? Last I checked neither Safari nor IE had webm support.
    - deleted 9y ago
      [deleted]
  - blaze33 9y ago
    The ghost blog allow me to directly upload images to my cdn, it's a little more work to publish a video and I was too tired when finishing this article yesterday to think of better options anyway :)

pmontra 9y ago

> channel.on('update:todo' ... > channel.push('delete:todo' ... > Have a CRUD interface over websocket REST over websockets. What's the advantage over HTTP? I know websockets allow for pushing data to clients, but this is pull so apparently there should be no advantage, only more code to write. Edit: maybe you're sharing updates among all the users connected to the server. Still, for sending requests HTTP is enough. Any performance advantage by using websockets?

deleted 9y ago
[deleted]
ploggingdev 9y ago
Websockets provide full-duplex communication channels over a single TCP connection without the overhead of a http request/response cycle. For realtime applications such as the one described in this post or for a chat application, there is a significant performance benefit over plain http. Maintaining open websocket connections is also very cheap in terms of memory used as well as cpu resources.
ht85 9y ago
Apart from the obvious push capabilities, yes, websocket has much less overhead and is faster than HTTPS. Once the connection is established, you can send requests starting at 1 byte size, whereas HTTP needs the full headers on every request. HTTPS also has a lot of handshake overhead, where you need 2-3 round trips per request instead of a single one with websocket. This can make a world of difference in a 150+ ping situation, where HTTP feels sluggish and websocket feels instant.
- ammmir 9y ago
  actually, both HTTPS and WebSocket over TLS (wss://) require a TLS handshake, so it's not like you're constantly doing that after you've loaded the page, but HTTP request/response header sizes could def be a concern.
  - jeremyjh 9y ago

thejosh 9y ago

I really like absinthe with apollo/subscripions on the frontend for realtime updates.

bsaul 9y ago

Non-representative anecdote : i've recently heard of two teams that started using elixir, they both came from a ruby background, and in both case they weren't using OTP. They both justified using elixir because it was "closer to ruby" (???), and they both seemed to live a pretty difficult time with that language. Which makes me wonder : why would you ever want to use such a special language (purely functional isn't for everyone) if you don't have any scalability issue, and don't even use OTP ?

gfiorav 9y ago
People usually dive into Elixir expecting Ruby, but it’s a very different language. Most of this confusion comes from not wanting to sit down and read a good book about it. The only thing it takes from Ruby is variable and namespace naming (since José Valim was a ruby syntax enthusiast). Ruby syntax is good IMHO, but that’s not the only reason to go for Elixir (far from it). I recommend the book “Programming Elixir”. Even if you end up not picking the language, it makes a good point about how OOP is a natural enemy to concurrency (because of state) and about how transforming data (I.e functional) is a better match. The language runs atop the Erlang VM, which successfully navigated the troubles of concurrency in ISP nodes a long time ago. Again, worth a read.
jeremyjh 9y ago
There is a significant learning curve, but anyone can learn it. It is not much like Ruby, yet it captures much of the joy of programming in Ruby and is far better for structuring large programs. There is optional typing support through Dialyzer, but even without that the compiler will catch many mistakes that annoy me and slow down development in Ruby. Also - the performance can really make a perceptible difference in user experience even if you don't "need" the scalability.
iaml 9y ago
I'm guessing what they really meant is "it's close to rails" since the same people made both rails and phoenix AFAIK.
- dudul 9y ago

Alexa_Anthony 9y ago

I really like absinthe with apollo/subscripions on the frontend for realtime updates.

Alexa_Anthony 9y ago

Does it generate real-time performances and analytics?

brightball 9y ago

If you're doing development with a web socket layer, it's entirely worth it to try out Phoenix Channels before you commit to another stack. It makes your life so much easier. There are a lot of other great reasons to use Elixir though.

dontlikeitupem 9y ago
The difficulty is finding good Dev teams building Elixir as Elixir and not second rate Ruby on Rails refugees looking for a faster Rails a-la Phoenix.
- ch4s3 9y ago
  > and not second rate Ruby on Rails refugees looking for a faster Rails That's pretty harsh, and not at all true in my experience. There's a growing community and I had no trouble hiring two remote people. I ended up with a lot of qualified candidates. Moreover, a lot of great people came over from Rails. Jose and Chris McCord were both formerly Rails people.
- brightball 9y ago
  The reason Elixir pulls people from Ruby is the language and community emphasis on developer productivity IMO. It’s the one thing that Ruby excels at so well it justifies using Ruby in the face of plenty of other “fast” options. Dev time and time to market are still infinitely more important than hosting costs unless you are already at scale. What Elixir brings to the table is the productivity and time to market with an architecture that scales for most every scenario experienced in server side dev aside from heavy math. And that architecture is designed in a way that makes maintainability a first class citizen because of the lack of long term dependency entanglement growth.
- sergiotapia 9y ago
  That's why I love Phoenix Context's that were introduced in 1.3 - it allows you to really structure your code and not just throw everything in a "model" like in Rails.
- Can_Not 9y ago

malloryerik 9y ago

How would you compare this with the same app done in Clojure? How would development and result be different?

cczomps 9y ago

Hello everyone,i would like to a help a friend who helped me get out of a dysfunctional and abusive relationship and helped me get proof of infidelity from my ex husband's devices.If you have a similar problem or you need to hack any device or website and you require 100% guarantee and anonymity, reach out to this computer guru via email with BLACKSPOTHACK @ GMAIL DOT COM

whalesalad 9y ago

I'm so excited about Elixir these days. I would love to see more cookbook examples of using Elixir but NOT as a Ruby/Rails replacement. While the concept is not new to me, I have recently become totally infatuated with the concept of green threads, actor models, etc... for dealing with concurrent processing. This is literally what Erlang was designed to do, and Elixir makes it user friendly. The real beauty of Elixir/Erlang is being able to run hundreds of thousands of concurrent "threads" (co-operative in userspace, not OS-level). Anyway I do not mean to detract from the post here -- just feel like a todo list is not a shining-star example of Elixir and would love to see some more hackers post their concurrency work here.

brightball 9y ago
For what it’s worth, the collaborative to do list is giving you an example of websockets with channels. Channels dedicates 3 server side processes per socket IIRC. One for the connection, one to supervise the connection and one to represent the user state for that connection. That’s only possible because of how cheap those Erlang/Elixir processes are. Because of that, just about any websocket example is a decent representation. Plus, when you really start thinking about how the entire platform is designed specifically for passing small messages around between process, websockets become an even better example since that’s exactly what they do with the browser. You enable passing small messages between millions of connected clients to a server side environment built for passing millions of small messages between clustered and horizontally scalable servers.
jetti 9y ago
>I would love to see more cookbook examples of using Elixir but NOT as a Ruby/Rails replacement. I would love to see more examples that get away from web dev with Elixir. While it's great with the Phoenix framework there is so much more to Elixir than that. Trying to deploy an elixir daemon has been a pain and I haven't found much around that. There is escript and distillery and while I haven't tried distillery for non-phoenix apps, escript works but deploying is still a pain.
- passer-by-123 9y ago

ttrbls 9y ago

Elixir Deez Nutz

isuckatcoding 9y ago

I think as the tooling /IDE support for Elixir improves, so will adoption.

shadykiller 9y ago

Elixir is pure pleasure. Coming from a ruby background, I din't have huge difficulty in understanding the syntax, and unlike other functional languages like Clojure, it's not an abrupt change from procedural paradigm. You can still assign variables in functions etc.

tytytytytytytyt 9y ago
You can still 'assign variables in functions' in Clojure, afaik. Did you mean mutate existing variables?
mischov 9y ago
Elixir should absolutely be an abrupt change from the procedural paradigm, and much closer conceptually to Clojure than Ruby. In Clojure you can still stick something in an atom or volatile and easily update it in place... doing that is a lot more involved in Elixir.
findjashua 9y ago
I'm assuming, you meant `reassign` (aka rebind) variables?