Implementing Simple Text Proofreading with Elm
I want to show you an example of how development with Elm looks like. This will be a simple text proofreading tool. It will analyze text and provide suggestions on how to make it better.
We will be using LanguageTool as a proofreading service.
As this is a series for beginners in Elm, I’ll try to keep it simple. For this reason, we’ll stick to simple web elements and won’t implement a complex text editor. This will allow us to concentrate on the Elm essentials.
What You Need to Know Before We Start
Before you start reading I recommend you to take a look at the official introduction guide for Elm. This guide will present you with a basic syntax of the language, main data types, and Elm architecture.
Setting Up Environment
Here are the steps you need to start working with Elm:
- Install Elm (the current version is 0.18).
- Have a code editor of your choice. I prefer Visual Studio Code that has got Elm support with elm extension.
Hello, World! App
Good. Now we are ready to start writing code. Let’s create a new file
Main.elm, and add the following code to it:
Before looking at the code, let’s run our program.
Running Elm Program
In a command line run the
elm-reactor tool, which builds your project and starts a local server at http://localhost:8000. If you’ll open the link, you’ll see the content of the folder:
elm-reactor created a new file for us—
elm-package.json. It contains information about our program, such as version, description, license, and dependencies. The
elm-reactor automatically added packages we needed to run our program as well.
Structure of Main.elm
Let’s look at the code in
import statement declares an import from the
Html package. We will be using
With the second line, we are calling the
div function passing it the text we want to show. Note that the
div function does not return an actual HTML code, but some data. Elm takes care of rendering HTML code for you.
If the description above is not clear, I suggest you check the Elm architecture overview that covers all these parts in more details.
In next post, we’ll take a look at the Elm architecture. Stay tuned!