Categories: Portfolio, Software Development

React vs Elm: Creating a comment box component in Elm

I recently published an article on CodeMentor.io titled “Building a Facebook-like comment box: a React tutorial in Elm” where I use the Elm programming language to essentially duplicate the React.js tutorial.

Update: I conducted a webinar where we built an Instagram clone in Elm.

The article has code examples and a step-by-step on installing Elm, running the Elm Reactor and then writing the code for the comment box. There is no JavaScript involved aside from the JavaScript generated by the Elm compiler.

elm vs react tutorial on codementor by Rudolf Olah
Click above to read the Elm Tutorial on building a comment box just like Facebook’s

Comparing Elm to React for JavaScript Frontend Web Development

The article has a brief comparison between React and Elm. It explains why you would want to use Elm for building your JavaScript frontend:

While the performance of React is awesome, at a certain point, you will notice that having React just isn’t enough.

You’ll also want Redux, Flux, or some other data flow library installed.

You will want Webpack and Babel installed so that you can use the latest features of ES6 (also known as EMCAScript 2016).

Then you’ll probably want to add type-checking and static types at that point, so you will also need to install Flow, a JavaScript type-checker.

Elm will give all the goodies that React, Redux/Flux, and Flow give you but as a collective programming language rather than as individual libraries.

Essentially, Elm is a functional language with the framework built in for solid frontend web development, it compiles to JavaScript. It’s similar to TypeScript in that respect, however Elm goes much further because it has its own syntax for better type-checking and compilation.

Also, instead of having to find individual tools, everything that you need to create fast components and single page applications come with Elm. It’s a batteries-included language. It comes with a REPL (command line interface). The Elm-Reactor included with it will reload any changes you have made to an Elm file. With all these elements, it is the perfect language for rapid frontend web development. You can learn Elm quickly, and learn to quickly build, test, and refactor Elm components in a way that can’t be replicated by tools like TypeScript or ES6 or React or Angular.

Compare React and Angular To Elm

So while React is great for creating web components, when we compare it to Elm, it can be hard to get started because it requires a bit more infrastructure around it (with Babel, Webpack, Flow, TypeScript, etc.) to really get started on developing a production-ready web application.

Note: React isn’t the only JavaScript framework/language/library to suffer from this, Angular also has a problem with setting up infrastructure (as do other JavaScript libraries). This is probably why React killing Angular in the JavaScript web framework wars is not so far-fetched. You can learn React and Angular fairly easily for the simple tasks. However, when projects become complex, the infrastructure starts to get in the way and it can be hard to learn how to debug the issues. It may be possible that if you compare other JavaScript frameworks like Vue.js to Elm, you will find they have better infrastructure and a good developer feedback loop.

Updated: Instagram Clone Article Published

It’s one of the first pieces of code I’ve written in Elm. I have been working on two other projects; one is an Instagram-clone, which I did an “office hours” live coding session for on CodeMentor.io.

The instagram code is neat because you can see how quickly you can write up a grid layout. You can see how to work with modals/pop-ups and how to manage state within an app. You can check out the code for the instagram clone here. The instagram clone is licensed under the Apache license 2.0.

Event Creation Tool written in Elm

The event creation tool for an event ticket sales page is cool. It explores more state management in the context of an app. For example there’s a way to switch the type of event you’re creating in the app. When you switch, an explanation page appears in between to give you guidance on how to create the different type of event that you just switched to. the event creator web app is licensed under the AGPL. You can check out the code for the event creation page for an event ticket sales website is here.

More Articles On Elm

I will be publishing another article on Elm (update: it has been published) very soon that is a continuation of the Instagram-clone code. It will include an API server to show how to use HTTP and AJAX calls. Furthermore, it will show you how to embed and fullscreen a component. This is vital if you want to use Elm today in an existing project and integrate components in a piecemeal fashion.

2017 UPDATE

instagram clone in elmUPDATE: The 2-part article on creating an Instagram clone in Elm (instaelm) has been posted on Codementor:

 

Categories: Portfolio, Software Development

Use JSON in Perl 6, article published

I wrote an article for codementor.io on how to use JSON in Perl 6.

It’s a good tutorial and introduction to Perl 6 which hasn’t seen wide adoption yet. It’s a solid language which has had a lot of thought put into it and the libraries that exist for it so far are good. Since it’s still Perl, it has that hack-y, fast-paced feel to it where you feel like you can quickly put together a one-off script to get the job done or put together an MVP (Minimal Viable Product). However, since Perl 6 is better designed, you can build a well-structured, well-engineered large project.

Learning new languages and how they work can help make you a better programmer and introduce new ways of thinking that can make it easier for you to find solutions to technical problems.

Categories: AngularJS, Portfolio, Software Development

Writing an AngularJS Tutorial, First Draft is up

The state of the AngularJS tutorials and API docs is not that great. I’ve had to look through two books and many tutorials just to understand the basics and instead of simply complaining, I decided to do something about it.

So here it is, my Learning AngularJS tutorial. It shows you how to setup an AngularJS project, what you need for testing, how to create a controller and how to use some of the more common directives, such as ng-repeat, ng-click, select, ng-bind, and ng-model.

The repo contains an HTML version and an ODT (OpenDocument text) version. There’s also the org-mode file used to create those versions. More importantly, all the code in the tutorial has been done in a literate programming fashion. Whatever you see in the tutorial has been assembled together and fully tested. All of the code is in the repo.

Update July 2017: You can check out the differences between Angular 2/4+ vs AngularJS 1.x here. I am planning on writing another tutorial using the latest version of Angular using the same literate programming style.

PyCharm: Markdown mode can display a Preview

The PyCharm markdown mode can display a preview! PyCharm is an IDE based on the popular IntelliJ IDE, it is specifically designed for working with Python. On most projects, Markdown is the popular text format that is used. It can be helpful to see a preview of the Markdown text that you are writing before committing it to your code repository or wiki.

If you need more reasons to try PyCharm, check out my presentation “Why PyCharm?”

It’s something that will help me document projects. Sometimes I wonder how the README of a project will look on github or bitbucket and the only way for me to check is to push my changes, fire up the browser, go to the repo and check it out. If there’s a mistake, then I have to do another commit, reload the browser and see what happens.

Text mode:

Text view of markdown in PyCharm
Text view of markdown in PyCharm

Preview mode:

Preview of a markdown file in PyCharm
Preview of a markdown file in PyCharm
Categories: Linux, Utilities

GNU Moe Tutorial/Review

Yesterday I was looking at a listing of updates for free software projects. I commented that the package GNU Moe could be used as a replacement for nano or zile, that is, when you need to quickly edit files from the command-line.

So today I’m giving it a go. I downloaded moe via the GNU project’s FTP server and installed it. The compilation was insanely fast, I think it took less than 10 seconds to get it all built and installed.

This blog post is a small tutorial (and a bit of a review) for using GNU Moe and is actually being written in it. I’m learning as I’m doing and this is usually the best way to learn anything. The manual for moe is, well it doesn’t exist. When you first enter moe you are confronted with a blank screen and a title bar at the top of it.

The title bar lists:

  • the command key being used (if any)
  • the current mode of the text editor, either “I” for “Insert” or “O” for “Overwrite”
  • the name of the file being edited
  • whether it has been modified and needs to be save
  • which line you are on
  • which column you are at
  • the time (in 12-hour clock with no AM/PM indicator)
  • a helpful reminder telling you to press “F1 for help”

In comparison, nano only tells you the version of GNU nano that you are using and the name of the file. Nano also helpfully lists some commands at the bottom of its screen.

Press F1 For Help

The first command key I used was of course "F1", the help key. GNU Moe uses the function keys for saving files, loading files, undo and redo, the options menu, the buffers menu and some other things which I will get into as I come across them.

The second command key that I used was Ctrl+C. If the current file being edited is Modified, it will ask if you want to “lose your changes”. If you press “n” meaning “No I don’t want to lose my changes”, it will save the file. I think this is better than asking if you want to save your changes. The way the question is posed is different and highlights the fact that you will lose whatever you were working on.

GNU Moe Gets Out Of The Way When Typing

In terms of typing, GNU Moe hasn’t gotten in the way at all. In fact, it has provided two useful command keys; Ctrl+Y which kills/deletes a whole line of text, and Ctrl+B which re-formats a paragraph by wrapping it at a certain column (I think column 72). The re-formatting is very useful when you’re on a regular terminal. Right now I’m in the shell that you get before running any desktop system. The screen can only handle 80-character columns right now. You can set the column to whatever you like in the Options menu (accessed by pressing F10).

Okay, I just pressed F2 to save the file. It asked me for a new name or location for the file, but luckily it already provides the same name as before. So saving the changes is a matter of pressing F2 and then the Enter key. You can also save and exit moe by pressing Ctrl+X. After I’m done typing here, I’ll definitely be using that, heh.

To load a file, you press F3. As soon as you open more than one file, they are loaded into separate buffers and then moe gives you access to the buffer menu. You can access it by pressing F11 and it lets you switch between the different buffers by choosing from the menu or pressing a number key. To get rid of the buffer, you press Ctrl+C.

So far GNU Moe is very easy to deal with, it all seems self-explanatory.

One thing to watch out for is the behaviour of whatever terminal you’re using. The GNOME Terminal wouldn’t let me use the function keys properly and the same was true of xterm. Another thing is the key bindings. They’re kinda like Emacs’s key chords, though not all of them are like that. There are four different prefixes for the key chords: “[“, “O“, “Q“, “S“. The first prefix is the most commonly used one, while the other three are used for special commands.

If you’re interested in IDEs rather than simple text editors, I recommend checking out PyCharm if you’re a Python developer and either Emacs or Intellij IDEA if you use other programming languages.