#phoenixframework

Build blazing-fast, real-time web apps with Phoenix, the powerful Elixir framework. This guide unlocks Phoenix's potential for beginners and experts alike. Learn key features, set up your environment, and see how giants like Pinterest use Phoenix for success. Take your web development to the next level - start your Phoenix journey today!

Choosing the right web framework is crucial in web development. A well-chosen framework, like Phoenix, can enhance performance, scalability, and maintainability. Phoenix stands out for real-time applications and high concurrency, thanks to Elixir's robust concurrency model. Comparing Phoenix with frameworks like Django, Ruby on Rails, and Node.js highlights its superior capabilities in handling real-time features and scalability, making it an excellent choice for high-demand web applications.

This is a small snippet needed to work with a small elixir package I’ve coded some months ago called FreeGeoIP.

I’ve used this package to get the web visitor country and city origin in a phoenix framework web application:

It took me some time to figure out how this combination works. Finally, it is rather easy.

Starting from ...

mix new myapp --umbrella

cd apps

mix phx.new myweb

... you should have a running Phoenix application now.

Add Elm

cd apps/myweb/lib/mywebweb/assets

npm install elm --save-dev

elm package install -y elm-lang/html

Add Your Elm App

mkdir assets/elm

mkdir assets/elm/src

touch assets/elm/src/Main.elm

Edit Main.elm

module Main exposing (..) import Html exposing (h1, text, p, div) import Html.Attributes exposing (style) elmStyle = style [ ("backgroundColor", "darkred") , ("height", "auto") , ("width", "100%") , ("color", "white") , ("padding", "1em" ) ] main = div [ elmStyle ] [ h1 [] [ text "Hello, Elm!"] , p [] [text "This is Elm in an elixir/phoenix umbrella app"] ]

Modify brunch-config.js To

exports.config = { files: { javascripts: { joinTo: "js/app.js" }, stylesheets: { joinTo: "css/app.css" }, templates: { joinTo: "js/app.js" } }, conventions: { assets: /^(static)/ }, paths: { watched: ["static", "css", "js", "vendor", "elm"], public: "../priv/static" }, plugins: { babel: { ignore: [/vendor/] }, elmBrunch: { mainModules: ["elm/src/Main.elm" ], makeParameters: ["--debug"], outputFile: "elm.js", outputFolder: "../assets/js" } }, modules: { autoRequire: { "js/app.js": ["js/app"] } }, npm: { enabled: true } };

Add A "div" For The Elm Application

in any of your phoenix-template-files

<div id="elm-container"></div>

Add The Following Code To The End Of assets/app.js

// Elm import Elm from "./elm"; const elmContainer = document.querySelector("#elm-container"); if (elmContainer) Elm.Main.embed(elmContainer);

Optional

If you're using Git, you may add the following lines to your .gitignore file

apps/myweb/assets/js/elm.js apps/myweb/assets/elm-stuff/

DONE

Your application should now show

wherever you put the div-tag mentioned above.

PhoenixFramework の WebSocket に iOS からつなぐ

PhoenixFramework の WebSocket に iOS から繋ぐのはとても簡単だった。 Awesome iOS with 🌟 で、 Swift で書かれている中から Starscream を選んで使ってみた。README にでかでかと表示されたロボットがカッコよかったので。 PhoenixFramework は ES6 で書かれた WebSocket 通信のためのクラスが最初から用意されてて、その仕組みに乗るとすごく楽なので、Swift 側で同じ仕組みに乗るような通信をすればよい。PhoenixFramework で実装された WebSocket の Chat を使ってみる。 PhenixFramework では、特定の topic に join するというのがあるが、これは JSON に event: "phx_join"…

Phoenix Framework で WebSocket のチャット

WebSocketでチャットという、遠い昔に流行った題材で、 Phoenix Framework を使ってデプロイまでやってみた。 URL とりあえず Nginx の背後において動かしてみた。 EC2 の t2.nano インスタンスで動かしてみてる。割とサクサクしてる感じがします。 https://chat.ecpplus.net 2つブラウザ開くか、PCとスマホとかで見ると通信の速度が確認できます。 環境構築 d elixir elixir のインストールは Homebrew とかで出来ます。 $ brew install elixir $ brew install rebar3 # 手元だと、prod の compile で必要だった $ elixir -v Erlang/OTP 19 [erts-8.1] [64-bit] [smp:4:4] [async-threads:10]…

Yesterday I attended the latest bi-monthly “innovation day” at Meltwater. Numo is my contribution. Not sure I’d call it innovative but it might be useful at least.

Numo’s purpose is to take care of deadlettered messages in RabbitMQ. It does so by either re-sending the messages to a destination (once), or by saving the message to a database. There’s a web front-end so you can see the messages that has been handled. I’m probably going to work a bit more on Numo to add some features and clean up the code.