Integrating Elm with Rails

nimmy — Wed, 30 Aug 2017 12:51:56 +0000

Why Elm? Switching to functional programming languages makes it a better environment for multi-threaded applications. For example, immutability is a powerful functional concept that JavaScript lacks. But in Elm, once created value cannot be changed, thus making a thread-safe environment. Each thread need not worry about other threads when they act on data since these data are represented by immutable objects in Elm. While in other languages it’s hard to catch production errors, Elm offers ‘no run time exceptions’ guarantee.

Friendly error messages

Elm has a reputation for great error messages, being statically typed. Consider the following Elm code

import Html exposing(..)
view orders =
  div [] (List.mapp viewOrder orders)
viewOrder order =
  span [] (text order.name)

Here’s an example for an error message after compiling the Elm code: This is what errors look like in the command line

--NAMING ERROR-----------------------------------------------------list-mapp.elm
Cannot find variable 'List.mapp' .
6| div [] (List.mapp viewOrder orders)
List does not expose 'mapp' . May be you want one of the following?
List.map
List.any
List.map2
List.map3

shows the line number in the code which caused the error
shows the actual line of code
lists the maximum possibilities for correct code

If you have a nice editor with Elm language integration, these error messages can be seen as a pop-up when hovering over the line of code which causes the error. This line of code can be identified easily as it will be red underlined. To start with Elm, we don’t have to worry about the huge libraries as in case of other frameworks. Just install Elm CLI and start coding. In a JavaScript application, we are probably putting together some collection of tools as below.

React
Redux
npm/yarn
Webpack
Immutable.JS

But Elm addresses these issue by providing all of them built in a single installer. JavaScript languages and browser engines are subjected to constant changes always. It’s not feasible to refactor the application accordingly. Building our application in Elm enables to get more efficient JavaScript code when newer versions of the language are released with compiler updates.

Start with Elm

Elm is a delightful language meant for developer happiness. When you write an Elm app, you write a number of modules in separate files and feed those files to Elm compiler. It gets compiled to JavaScript that’s ready to run the program.

Architecture

Whenever we write an Elm app this architecture will be following. All Elm apps in practice are structured this way. So, we start by writing an init function, whose job is to generate the initial model for our app. This is the complete model for the current state of the front end as it’s running in the browser. The second function is the view that takes the model and generates the Html interface for your web app. In React like frameworks, it lets you generate a virtual DOM. So every time front end is rendered it will calculate the entire user interface and the framework takes responsibility for efficiently updating the changes in the actual browser. Elm also has its own virtual DOM implementation that is really faster compared to React, Angular etc. As part of our interface, we will declare the events we are interested in. If the user does something like click a button, Elm will send the program a message. So we need to write a third function to handle those messages and that’s the update function. This function will take that message and the program’s existing model and put them together in order to generate the new updated model for the program. Then it feeds to the view function to generate the updated interface. This is how Elm looks like.

Install on Rails

Elm is officially supported in Rails 5.1 via the webpacker gem. Be sure to install yarn and Node.js first. Node.js version should be >6.4.0+ Then, to use Webpacker with Elm,

rails new elm-on-rails --webpack=elm

If Rails application is already setup with webpacker, run

./bin/rails webpacker:install:elm

within the app. If it’s not setup with webpacker, add gem ‘webpacker’ to your gemfile and then install Elm. Navigate to app/javascript/packs directory. A file named Main.elm that displays “Hello Elm!” text is generated there, along with a companion file hello_elm.js

#hello_elm.js
import Elm from './Main'
document.addEventListener('DOMContentLoaded', () => {
const target = document.createElement('div')
document.body.appendChild(target)
Elm.Main.embed(target)
})

Now, we need a page to display the Elm output. We’ll create a new file app/views/application/index.html.erb in order to render the layout: Use the javascript_pack_tag helper to import hello_elm.js file:

<%= javascript_pack_tag "hello_elm" %>

Add this line in application.html.erb or index.html.erb since hello_elm.js file embeds the output in the current document. Then add a default route

#config/routes.rb
get '/', to: 'application#index'

Before firing up Rails server, do

bundle exec rails webpacker:compile

Then run rails server and you will be seeing the “Hello Elm!” greeting.

Immutable Data and Pure Functions

Elm programs are made up of immutable data and pure functions. This contributes to the simplicity of the language. In Ruby, if I say,

user.update(params)

Calling an update method will change that user object in place. The initial value in user object is gone now if we do not have a copy of it before method call. In the same controller,

new_hash = hash.merge(params)

Calling hash.merge doesn’t modify the hash in place but returns a new_hash with updates applied to it. The above examples are two different APIs designed in different ways. This can be confusing to beginners if they find it difficult to understand why different functions work in different ways. But it’s not an issue in Elm as its values are immutable. In Elm,

newUser = update params user

user object can be passed to update function but that can’t change its value; it’s immutable. What we can do is to create a new value with some changes applied to it. Thus, the update function will return the newly updated user. That’s just how all Elm functions work, so there’s little situation of confusion as explained first. The update function we explained in Ruby can have side effects. It brings changes to the database. If a function does nothing but provides the same return value based on its arguments, then only it can be called side-effect-free. The function should not make any impact on anything else; that’s pure function in terms of functional programming. Elm functions cannot have side effects because all Elm functions are pure functions – a strong reason why Elm defined as a functional programming language. The only thing the functions do in Elm is calculating its return value by the arguments that we passed to and constants. They cannot have side effects. The advantage is that we get more predictable programs.

Elm Platform

To develop our Elm applications, four tools will be essential.

elm-repl

To quickly execute a small piece of Elm code from the command line without having to create a file. To start using the REPL, execute elm-repl in the terminal.

elm-reactor

Creates a server that will compile your elm code and will be able to see the result directly on the browser. Also, we can set a different port and custom address.

elm-reactor -a 0.0.0.0 -p 3000

elm-make

We can use elm-make to translate the Elm code to native files for the web(HTML, CSS, and JavaScript)

elm-package

Tool to install and publish Elm packages. Type elm-package in your command line to make it available, and to install a package:

elm-package install

Elm having a solid architecture enables to build our projects with a guarantee that we have things under control even when application increases in complexity.

References

]]>

Lazy enumerator to handle huge files

coderhs — Fri, 12 Aug 2016 08:49:12 +0000

Lazy evaluation, or call-by-need is an evaluation strategy which delays the evaluation of an expression until its value is needed. It’s frequently seen in functional languages, ruby introduced the lazy method in Ruby 2.0. For those who don’t know what are enumerators: enumerators are something that can be counted. So a collection of elements, files (file is an collection of lines of string), etc can be treated as an enumerator. In ruby we need to make something countable into an enumerator object, which is done by applying .each and .map on it.

[].each
[1, 3, 4].each
file.each
{}.each

Ruby has a wide range of operations we can do over a collection, it’s one of those features that makes Ruby such a powerful dynamic language. An enumerator can be used to generate series like the Fibonacci series.

fib = Enumerator.new do |y|
  a = b = 1
  loop do
    y << a
    a, b = b, a + b
  end
end

But when we do a .map / .each with a code block, then it would try to realize the enumerator fully and then apply the block over it. That would be fine when we are working on something small like:

[1,2,3].map { |i| i*i }

But when we take the above fib enumerator, which will grow into an infinite series, adding a .map would lead the code to an infinite loop. If you are crazy enough to write an infinite loop, feel free to run the below code.

foo.map { |i| i * * }

When we try to use these operations on a huge 10 GB file,there it makes your program realize the entire file is close to impossible. So this is the case where the lazy enumerator comes to place. It would ask ruby to defer the realization of the enumerator until it is required, and not before you run your operation. So with respect to the above Fibonacci enumerator, you should change the code to as below.

foo.lazy.map { |i| i * i }

So now, the program is ready, all good it would run fast. But it won’t execute them until you call or access those elements. So only when we do foo.lazy.map { |i| i* i }. First the first element is calculated and given to us. Like wise if you want the first 10 elements of the fibonacci series then you have to do foo.lazy.map { |i| i* i }.take(1o).to_a To do the same with the files, as a file is a collection of lines, follow the below code snippets:

fille = File.open('OurHugeFile.log')

get the first three lines, lazily:

file.each_line.lazy.take(3).to_a

get the firs two lines with word “INFO”

 file.each_line.lazy.select { |line| line.match(/INFO/) }.first(2)

So if you want to print something with line numbers, just do a map from the lazy.

file.each_line.lazy.each_with_index.map { |l, i| "#{i}: #{l}" }.select { |i| match(/INFO/) }.first(3)

If you have anything more to add to this, kindly comment below.]]>

functional – redpanthers.co