Aapo Laakso – My month at Talented
This text is written by Aapo Laakso, an ICT BBA student who worked at Talented as part of his Thesis and developed our internal tool with React at the beginning of 2018.
Thesis topic
Last autumn I was looking for a place to do my Thesis at. Luckily I met Teemu and got an opportunity to work at Talented. They had a need for an updated interface that they use as an internal tool, and when running the company took most of everyone’s time they didn’t have time to focus on developing the interface.
The interface in need of an update was the view employees used to manage the data of talents. It was functional but there were some problems too. I started my job by interviewing the team members who use the interface. The biggest issue was that the system was slow to use: Simple tasks took multiple clicks and the displayed data wasn’t formatted to show the most relevant information. From the beginning, we wanted to have everyone in the loop, so after every change, I always asked the team’s opinion. The interviews also gave me really good ideas for the design.
Tech
Tech wise, Teemu and I decided to use React. There were already some parts of the system using it and I was also eager to learn it. I had some experience with React but was still very much a newcomer. The system ran on Ruby on Rails but I had no experience with it so I only focused on the user interface. I found it really easy to use React with Rails because there is a gem for Rails called React on Rails. The Best part about it is the Rails “convention over configuration” ideology: There is almost zero need for React configuration as opposed to vanilla React project.
gem "react_on_rails, "10.0.0"
gem "webpacker", "~> 3.0"
Webpacker and React installation
1. bundle exec rails webpacker:install
2. bundle exec rails webpacker:install:react
Commit to git after this. The generator will not continue unless given option
--ignore-warnings
rails generate react_on_rails:install
foreman start -f Procfile.devThe startup React component is combined to Rails HAML page. Rails variables or other data can be passed as React props if needed.
<%= react_component ("HelloWorld" , props: @some_props) %>Inside Javascript /pack folder React is registered to be part of Rails application.
import ReactOnRails from 'react-on-rails';
import HelloWorld from './HelloWorld';
ReactOnRails.register({ HelloWorld });
By registering components, Rails can differentiate between what is normal Rails and what is React. @some_props can be Ruby hash or JSON-string. It’s optional if React needs a Rails variable.
# Rails View
<%= react_component ("HelloWorld" , props: { name: "Stranger }) %>
// inside your React component
this.props.name // "Stranger"
React on Rails have many things that make front-end coding more enjoyable
Hot reloading can be used for small Ajax-calls or with Rails server.
CSS modules remove the annoyance of global CSS namespace and way too long class name inside components.
ES6 JavaScript is much better suited for front-end coding.
In React on Rails Javascript can be used as it is and you don’t have to worry about Rails asset pipeline or some workaround. Javascript libraries can be downloaded straight from npm and not trough rubygems. The result is however still a Rails application. Webpack etc configurations just implement themselves inside it. All of this reduces Javascript fathom which comes from all the configuration. When React on Rails is in use the front-end developer can focus on programming React.
Webpack is used to create Javascript and CSS bundles straight to /public folder, and Webpacker to bypass Rails asset pipeline. However, it’s the developer’s responsibility to ensure Webpack creates right kind of bundle. It’s still easier to use Webpack for SP. Other solutions usually have a dedicated node.js-server to handle asset management. Webpacks bundles are good for many things such as dividing the application. For example, admin users get their own data and the regular user never has access to the admin-only code. For this Webpack can be used to create different bundles for them. Shared code can be in its own bundle and thus there is no need for duplicate code.
The work
The work process started with going through the goals to be accomplished in a week. At the end of every the week, we had a review and checked what needed to be fixed before setting up new goals. Goals were small enough for a week-long sprint and could be something like creating a redux action and reducer. Of course, some goals followed along all the time, for example styling the components according to designs. SASS was used for that. The most challenging thing I had to work with was formatting data: Data coming from the database often isn’t usable as it is. The data needed rules and conditions so it would be relevant and readable. Creating if- statements to match conditions took time and figuring out. But in the end, I was really happy how smoothly everything went and there were hardly any show stoppers.
A month is a very short time for a development project, but we were able to set and reach the goals very well. The feedback that I got was only positive, and everyone who got to test the new interface said it was so much better than the previous one. This project taught me a lot and I really enjoyed working at Talented. Every morning I was happy to be there, and I want to thank everyone in the team for this opportunity. We really got everyone to participate and it showed in the end result. A special thanks to Teemu for being a senior for me and helping me out whenever I needed support.
