Beautiful Web Design in Elixir/Phoenix

Questions / Help
1

Hi -

I’m new to Elixir/Phoenix. I also don’t know a ton about a lot of the newer js technologies. Having fooled around with bootstrap, I found it super easy to create really beautiful websites really quickly.

I want to use Elixir/Phoenix framework but also create something really beautiful. I’m wondering if one builds some beautiful site in Angular or Bootstrap or whatever technology, is it easy to integrate this into Phoenix?

In my limited experience I have not found an easy way to integrate the two technologies together – like I can have this really unpleasantly looking site built in Phoenix/Elixir that handles messaging really well off the shelf, or I can build a much more pleasant looking site in some other technology but maybe which does not scale well on the messaging front.

Am I misunderstanding things – and could someone point me to any resources that describe how to to better design the front end in Elixir/Phoenix (presumably with some other technologies like bootstrap)? I’m having trouble understanding how to refactor the off the shelf code to integrate custom UI stuff. And partly that is being new to the technology but also because I haven’t seen any good resources for such (e.g. books, online resources etc) that explain what one is supposed to do.

Any suggestions would be much appreciated.

2

Phoenix by and large is agnostic to the front end technology being used.

It just happens that the default project setup uses EEx server side templating with the milligram CSS framework and uses webpack as a bundler to support modular JavaScript. Ultimately it is your responsibility to choose the front end technology that you want to use and understand its concepts to the extent that you can integrate it with Phoenix - there aren’t that many integration points‡.

Most neophytes struggle with the concept of bundling, some thoughts here:

But when it comes down to it you don’t even need to use a bundler, Phoenix can support “old school” practices, see:

‡ Integration points:

  1. How Phoenix launches an asset build is configured in app/config/dev.exs under :watch:
  watchers: [
    node: [
      "node_modules/webpack/bin/webpack.js",
      "--mode",
      "development",
      "--watch-stdin",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]
  1. The files Phoenix watches to reload into the browser during development are configured in app/config/dev.exs under :live_reload:
# Watch static and templates for browser reloading.
config :hello, HelloWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
      ~r{priv/gettext/.*(po)$},
      ~r{lib/app_web/views/.*(ex)$},
      ~r{lib/app_web/templates/.*(eex)$}
    ]
  ]
4 Likes
3

Hi,

Assuming you want to communicate both apps (front end and back end), you do need to build an API in Phoenix, then the Angular app should fetch JSON data (exposed by Phoenix) and show the relevant content on the user interface.

Inside Phoenix’s templates (.eex files) you can embed your CSS (e.g. Bootstrap) and/or JavaScript (e.g. Angular). If this world is not new to you, Phoenix is pretty much like any other full stack framework you may have used before; Rails, Laravel, Django… Just to name a few.

1 Like
4

Thanks you two! Really appreciate your feedback. PeerRenders - thanks for the links to the article, the Medium piece really helped me understand bundling.

If you have any other books or articles you think might be useful towards getting better at Elixir, please let me know. Thank you both.

5

If you have any other books or articles

Some discussions:

2 Likes