Web development could be a hardworking task. There are a lot of coding languages that can be worthy of building a great product. So, which one must be chosen among all of them? If there’s a language that has gained cult status on web development frameworks and in the shortest span of time, it’s Python.

Any programming language’s choice depends on how robust and responsive the end application is intended to be and the volume of coding and complexities it may involve. As an Object-Oriented Programming Language focused on Rapid Action Development (RAD), Python has motivated many emerging organizations and startups to choose it as a first-choice. In fact, developers have acknowledged the many significant advantages that endorse Python for web development and how it can quickly adapt to technology changes.

This blog post will introduce you to Python characteristics and how it inserts itself into the web development domain. We will discuss the benefits of using Python and describe the two most popular web development frameworks for it: Django and Flask.

What is Python?

Python was first created in 1991 by Guido van Rossum. Its philosophy highlights code readability, which is made clear by its simple syntax, namespaces, and rigidity towards indentation. The simplicity and readability of Python make it a favourite as an initiation language for many people. Tim Peters described the language beautifully using 19 aphorisms, which are known as the Zen of Python:

Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.
Special cases aren't special enough to break the rules.
Although practicality beats purity. 
Errors should never pass silently. 
Unless explicitly silenced. 
In the face of ambiguity, refuse the temptation to guess. 
There should be one-- and preferably only one --obvious way to do it. 
Although that way may not be obvious at first unless you're Dutch.
Now is better than never.
Although never is often better than *right* now.
If the implementation is hard to explain, it's a bad idea.
If the implementation is easy to explain, it may be a good idea. Namespaces are one honking great idea --let's do more of those!

Python is a simple but powerful language that runs smoothly on the most popular operating systems (Windows, Linux, and Mac). This language can conform to the programmer’s coding style (functional, imperative, or object-oriented), meaning that developers can use the style that best suits the handed task. Python can be used not only for web development but also in many different fields ( Artificial Intelligence, Deep Learning, and the Internet of Things) and in many different industries like Travel, Healthcare, Transportation, and Finance.

Many world-class software companies (like Google, Intel, Microsoft, Dropbox, Instagram, Facebook, and Spotify) use Python in their services and, if they do it, that’s got to mean something!

Why use Python for Web Development?

First of all, what is web development? Although it may seem hard to define, web development can be seen as a way of creating, building, and maintaining websites. Typically, web development involves a front-end (everything that interacts with the user) and a back-end — hidden from the regular user — which contains all the business logic and interacts with a database. Python inserts itself in web development as a back-end language, and it is usually combined with some other front-end language (frequently javascript) to build a whole website.

Back to our star question, the reason for using Python in web development is simple: it’s an adaptable, versatile, and highly efficient programming language that offers dynamic typing capabilities. Python allows developers to create scientific applications, system applications with graphics, games, command-line utilities, web applications, and many more options. In fact, Python has been considered as “the most popular coding language” for the past years. Check the graphic below regarding 2019 pieces of research over the most popular coding languages:

Another excellent reason for using Python is that it can be used and distributed for free. Known as an open-source product that works with a vast set of libraries, all the coding information needed is available on the Internet, which means that copying, embedding, and distributing Python in your products is unrestricted. This makes it extremely useful in the digital systems world once it conceives flexibility in the marketplace and allows companies to interact with many industry sectors. The result? A high-functioning and very successful product. Let’s check the main benefits:

Benefits of using Python for Web Development

There are several factors that simplify the use of Python for web development:

• Easy to learn: The simplicity of the syntax allows you to deal with intricate systems and ensure communication between developers working on the same project is much more efficient. In fact, a language that is easy to learn means that newbie developers or developers who don’t have any experience in python can learn the language and join the development team faster.
• Good readability: The fact that python is similar to our everyday language and its emphasis on readability means that its developers can write understandable code.
• Complex tasks on the back-end: Python is an advanced coding language that allows you to do complex tasks on the back-end, including AI and Data Science as well as any other common task in other programming languages.
• High popularity among web development: Usually, this characteristic can be seen as an index of how suitable/good a language is, but this is also an advantage for debugging our application. If you are struggling with some bug or don´t know precisely how to implement a new feature, there probably exists someone on the internet who already had the same problem, and finding a solution is only a few clicks away.
• Wide range of libraries: There are a lot of python libraries that you can use to accelerate the development of your application. These libraries are packages of pre-written code available to everyone, so you don’t have to reinvent the wheel. Some of the libraries are Numpy, scitLearn for data analysis and mathematical algorithms, and x for composable SQL queries.
• Good Frameworks: Some of the most popular web development frameworks for python include Django, Flask, Pyramid, Web2Py, and Turbogears. These frameworks are similar to toolboxes aiming to help you speed up the development of a web application. They contain packages and modules of standardized code to aid you in several application areas (URL routing, accessing the database, HTTP requests, and responses ).

In the next two sections, we will introduce and discuss the two most popular web development frameworks for python: Django and Flask.

What is Django?

Django is a back-end python web development framework for building complex and scalable websites, and it might be the reason for python´s rise in popularity in the last years. Django uses the model-view-template (MVT) architecture, a pattern based on a set of best practices for organizing your code.

Model: The model is what binds your application to the database. Normally a model represents a table in the database and defines what and how your application accesses the database. It simplifies the tasks of creating, deleting or updating table entries.

View: The view is the user interface. It renders the templates and defines what you see and the behaviour of it. It is composed of HTML, CSS, and javascript files.

Template: Is the desired static HTML structure file with special syntax. It describes the inserted content.

Django follows a “batteries included” philosophy, which means that standard functionalities for building web applications should come with the frameworks. So, by just installing Django on the device, it will allow you to have access to: user authentication system; URL routing; the template engine; Object Relational-Mapper (ORM); and database schema migrations. This makes the initial application setup very fast and, if you require additional tools, Django has more than 4000 extra downloadable packages that can be used according to your project needs.

In addition to this, Django has a very detailed documentation. With it being around for a long time (2005), many helpful practice tutorials are readily available on the internet. Being proficient in Django will make application development pragmatic, fast, and clean. Over the years, many popular websites were built using Django — that’s the case of Spotify, Instagram, and Youtube.

What is Flask?

Armin Ronacher developed Flask, in 2010, as a back-end Python framework widely known as Django’s alternative for web development. Being more recent than Django, Flask’s creator used the Python web development community to base his knowledge as he built this new framework.

After Flask’s initial success, the author created “The Pallets Projects”, a collection of libraries to help developers with their web development needs. Even if Django and Flask serve the same development purposes, they have a very different philosophy.

Flask comes only with two main components: The Jinja 2 template engine — to help build HTML templates — and the Werkzeug (a scary german word), a tool that provides HTTP routing support. Because of its simplicity, Flask is considered a microframework that doesn’t force you to work with a large predefined set of tools like Django. Instead, Flask comes with the bare minimum, leaving the developer to decide what tools should be used. For this reason, Flask is considered a more pythonic framework of the two.

The Flask minimalistic approach means that applications can be developed with minimal boilerplate code and, when handled by experienced developers, Flask can produce extremely straightforward applications (code-wise). However, the framework flexibility and the available tools allow the application’s functionalities to extend as the project requirements change or evolve.

In short

Python is an amazing coding language that has been around for a long time. Its simple and straightforward syntax makes it ideal as a first-choice language for beginners, yet it is powerful enough to be behind some of the worlds’ most popular websites.

Both of its most popular frameworks — Django and Flask — have their merits, and you can go with either of them to build your web application. Yet, if you are a less experienced developer, we recommend using Django once it provides an easier and faster web development. There’s a popular saying in the Python community that is both funny and self-explanatory: “Pirates use Flask, The Navy uses Django.”

Found this article useful? You might like these ones too!

• Ruby vs Python for web development
• How to handle async operations with Redux
• Angular vs React: A comparison of both frameworks

Originally published at https://www.imaginarycloud.com on December 24, 2020.

Have you ever imagined the value that exists in a cloud of data? Well, feel free to come aboard with us!

Living in the era of “ Big Data” can be overwhelming. We might not think about it, but we continuously produce and release volumes of information about ourselves with each move we made (cameras, sensors, card movements, PC logins, internet navigation).

If the need for storage was previously the main focus, nowadays, it’s how we can process complex and large sets of data considered key information about individuals, groups, and periods of time. Extracting meaningful insights is what Data Science stands for. In this blog, we will be covering the foundations of Data Science and how it can help businesses grow and prosper.

What is Data Science?

Data Science is an interdisciplinary area that uses scientific methods, processes, algorithms, systems, and machine learning principles to discover hidden patterns, trends, and correlations from the extracted raw data.

Data Science emerges to provide a holistic business vision by gathering and filtering valuable/actionable insights that help predict customer behavior and identify new revenue opportunities. The result? It will ease the decision-making process and enhance innovation and efficiency.

Data Science can be used for:

• Detection of anomalies (fraud, disease, crime);
• Automation and decision-making (background checks, credit worthiness);
• Classifications (like classifying emails as “important” or “junk”);
• Forecasting (sales, revenue and customer retention);
• Pattern detection (weather patterns, financial market patterns);
• Recognition (facial, object, voice, text, fingerprint);
• Recommendations (products, services, books).

How is Data Science changing the world?

From 1970 to the middle ’90s, the existing data was mostly structured and small in size, which could be analyzed using simples BI tools. Today we face a completely different reality, where about 80% of data is unstructured or semi-structured. Check the figure below:

Big Data makes it possible to achieve research results that cover a wide range of issues and tell us much about developments in the world in many different areas. This data is generated from different sources (databases, text files, social media, forms, APIs, browser searches, etc.), and simple BI tools cannot process the large volume and variety of data.

The demand for data science skills has grown significantly over the years. Having advanced analytical tools became essential to process and analyze data. These tools help data scientists find meaningful insights and uncover solutions to business challenges.

What is a Data Scientist?

Data Scientists not only do the exploratory work to discover relevant insights from data. They also use advanced techniques and algorithms to develop hypotheses, make inferences, and identify customer and market trends. More than analyzing what is currently happening, they are responsible for setting best practices regarding data interpretations.

Data Scientists are a new breed of analytical experts who use industry knowledge, contextual understanding, and predictive assumptions to find trends and manage data from many angles, sometimes not even known earlier. This role is an offshoot of many scientific areas such as mathematics, statistics, and computer science, using the latest technologies (like machine learning and artificial intelligence) to find development solutions and growth within organizations.

How can Data Science leverage your business?

We have already seen what Data Science is capable of, but how do we make it useful to us? What are its real-world applications?

In fact, Data Science is revolutionizing many industries (see picture below), providing valuable business benefits that can be summoned into three major categories: business efficiency, product creation, and customer experience. The ability to increase efficiency is the highest value opportunity that Data Science brings to an existing business model.

How Data Science can help improving business efficiency:

• Data Creation: improving business efficiency requires more than analyzing the existing data. Creating new and useful data through some tests will help to measure what needs to be improved. Finding actionable insights within this data can result in a significant productivity increase.
• Real-Time Reporting: it can improve business efficiency immediately by generating and leveraging micro-scale interaction that makes customer interactions more effective. Companies that prioritize better response times will have their sales processes optimized.
• Historical Data Interpretation: historical data allows to analyze customers’ past behavior and build predictive models to learn how they will likely behave in the future. More than learning from the mistakes on a person-to-person level, it’s essential to predicting the occurrence of future events to avoid those problems altogether.
• Data-Driven Culture: Focusing on data and making the best use of it can’t just be the data science team’s scope. It must be part of leadership’s mentality in encouraging data-driven decision-making at every level, with every employee understanding data’s inherent importance in their job role.

Conclusion

The gathering and generation of large volumes of data have long outpaced our ability to process it manually. The automatic processing and analysis of data is a growing industry all on its own. And guess what? The full potential of Big Data technologies is beyond any business’s ability to realize it without Data Science experts to help.

To be ahead of the curve, it’s necessary to have a science team focused on creating and analyzing predictive constructs to boost your business efficiency. Being a strong competitor requires implementing all these cutting edge data procedures and taking the best advantage.

Found this article useful? You might like these ones too!

• Native vs. Hybrid vs. PWA: The Pros and Cons
• Why Building A Minimum Viable Product Matters
• 18 Best Agile Practices To Use In Your Software Development Life Cycle

Originally published at https://www.imaginarycloud.com on December 17, 2020.

Animations on the internet are not new. They have been used to achieve many goals, including making something more interesting to watch or even more appealing. Sometimes that is what makes a website stand out among the competition! Animations can make UI elements resemble the real world, making them smoothly change while giving the feeling of continuity, action and progress, instead of changing in a blink of an eye.

Even when applied to small elements, animations can help the user remember whether an action was executed or not. In fact, the user is more likely to remember what he/she just did after perceiving something changing little by little, instead of all at once. A simple animation for a loading screen tells more than just waiting with a white page. It’s the difference between knowing something is still happening and wondering if the page is broken.

What are CSS animations?

There are a lot of different ways of achieving an animation on a webpage. You can use a premade animation from a .gif file and use it as a regular image, which can be simple but will make you lose the ability to change that animation within the code. Manipulate HTML elements using JavaScript is a thing that can be done as well, however, it is often a little too expensive in terms of computation. Also, feel free to use CSS and define multiple styles of an element to smoothly change throughout time. It will not only be easier but also allow the browser to optimize performance and efficiency.

CSS offers two different types of animations. The first one is the transition property, which is frequently used for hover effects and other user interactions. The second one is the animation property, which allows creating more continuous animations or, as we will see later, animations with more stages. Check the example of these two properties’ effects on the codepen below (if you don’t know what codepen is, check our article about this great tool for sharing code snippets):

• at the left an hover effect using the transition property;
• at the right a loading effect using the animation property.

Key elements of animations

To make simple or more complex CSS animations, it’s necessary to master two key elements: Animation Timing and Inner Components. An animation without time associated is the same as having no animation, as it will merely change instantly. Using inner components will make life easier as it is much more likely to need more than one element to enhance animations. Let’s check them:

Animation Timing

To create a smooth animation or transition, it’s essential to define time limits. On both transition and animation properties, we have duration, that says how much time it takes to go from start to finish, which is defined by the first time unit (seconds or milliseconds). Then, the delay, which determines how much time the element will wait before the animation starts, being defined by the second time unit.

transition: all 0.5s linear 0s; animation: rotate 1s linear infinite 0.1s;

Below, there are four examples that show the multiple effects that different values can create: two hover effects (one with a duration of 0sec and another 0.5sec), together with two loading effects (one with a delay of 0sec and another with 0.1sec, 0.2sec, and 0.3sec for each of the squares).

Inner Components

The second key factor and the secret for making more sophisticated animations is the use of inner components. If only one or two extra elements are needed, the :before and :after components can be used, just like in the sample below.

//HTML structure <div class="my_text"></div> /* CSS styling */ my_text { ... } my_text:before { content : " " ; ... } my_text:after { content : " " ; ... }

They can be styled as usual on your CSS file, but it won’t be necessary to define them on the HTML. It will automatically associate the extra elements with the main component, leaving the HTML intact. The only difference in the CSS is that you need to define the property content represented by a string. As an example, it’s like describing the text inside a div on the HTML. From the hover effect example, check below how the a:before component was styled and an empty string was used on the content property to only create that little corner.

a { color: #FCD63F; font-size: 35px; text-decoration: none; text-transform: uppercase; padding: 5px 10px; margin: 0px 10px; position: relative; transition: all .5s } a:before { content: ""; position: absolute; bottom: -8px; left: -8px; width: 12px; height: 12px; border: 3px solid #FCD63F; border-width: 0 0 3px 3px; opacity: 1; transition: all 0.3s }

In case the animation needs more than two extra elements, standard HTML components can be used. Change the HTML structure and incorporate unstyled components like spans, apply styling, and then apply the transition or animation. The use of multiple components is also useful if you have different types of movements once each component can only take one animation or transition at a time. The example below shows the loading effect: there is a div named container with four spans inside, and the container has one animation which makes it get bigger. Finally, each span has an animation that makes them rotate.

//HTML structure <div class="container"> <span></span> <span></span> <span></span> <span></span> </div> /* CSS styling */ .container { width: 90px; height: 90px; position: relative; animation: animate 1s linear infinite; transform: rotate(45deg); } .container span { position: absolute; width: 45px; height: 45px; animation: rotate 1s linear infinite; }

CSS transitions

So, how is a transition implemented? The first thing to do is define an initial and final style/state of the elements involved, including the :before and :after components. Then, using the transition property, it will inform those components how they will behave between the two states. This transition property is the composition of four other properties: transition-delay and transition-duration (which are time-related properties and we have already covered), transition-property and transition-timing-function.

Let’s check what these last two properties are and how do they work:

Transition-property

This part of the transition allows specifying which properties are going to be affected. It can be set to “all”, so all properties that change from one style to another are selected. But it can also be a specific property or a set of them. This is very useful when setting different timings or behaviours between the element’s different properties. For example, if you want the background-colour to change much faster than the text colour, you would use:

transition: color 0.5s linear 0.5s, background-color 0.1s linear 0.5s; // instead of transition: all 0.5s linear 0.5s;

Transition-timing-function

The timing function defines the transition’s velocity and has a set of possible values:

• linear, the velocity will be constant;
• ease-in, it will start slow and then get faster;
• ease-out, it will start fast and then get slower;
• ease-in-out, a mix of the last two: it will start slow, then get faster and slower again;
• ease, is a variation of the previous one and the default value of this property.

Explore how these different values can affect an animation in the example below. Notice that the transition can keep track of itself. Moving the mouse quickly in and out of the animated component, the animation will not go all the way till the end: it will rollback.

CSS animations and keyframes

In contrast to the transition property, there’s no need to specify the element properties affected, nor even define an initial and last state on animation one. The animation property gives more freedom due to keyframes usage. Keyframes determine the different styling/states of the component, having a name that will be later used on the animation property. Having just two states, it can be used “from” and “to” to define the initial and final ones. But, in case of wanting more, it can be used percentages and specify something like the rotate animation on the loading effect.

@keyframes rotate { 0% {transform: rotate(0deg);} 10% {transform: rotate(0deg);} 50% {transform: rotate(90deg);} 90% {transform: rotate(90deg);} 100% {transform: rotate(90deg);} } span { position: absolute; width: 45px; height: 45px; animation: rotate 1s linear infinite; }

Just like the transition property, the animation one is also the composition of other properties. They are: animation-duration, animation-delay and animation-timing-function, that work in the same way as the transition ones; animation-name, where the name of the keyframe appears; animation-iteration-count, to determine how many times the animation will run, which can be a specific number of “infinite”; animation-direction and animation-fill-mode.

Animation-direction

This property tells in which direction the animation must render on the keyframe selected, allowing to choose one of the following values:

• normal, the animation goes from 0% to 100% (default value);
• reverse, the animation goes from 100% to 0%;
• alternate, the animation goes from 0% to 100% and 0% again;
• alternate-reverse, the animation goes from 100% to 0% and 100% again.

Animation-fill-mode

Wondering what happens to the component after the animation finish? The animation-fill-mode property has the answer for it. This value tells how the component may behave outside the animation time, in other words, before and after the animation:

• none, the component is set to its default style;
• forwards, after the animation is complete, the component will remain as the animation left it;
• backwards, before the animation starts, on delay time, the component will immediately take the style defined at the start of the animation.
• both, before and after the animation, the component takes the style the animation defines.

Check the result of each value below. Just click on any of the boxes where the animation has one second of delay and the differences will be clear.

What CSS properties can be animated?

Both types of animations element properties can almost be changed, as long as they are represented by unit values. For instance, you’ll be able to see a smooth transition on colours, height and width values, margins and paddings, opacities, transform, etc. However, you won’t see that effect on borders style, position, float, background-img, font-family, etc.

Even though unit/numeric properties can be changed smoothly, not all of them impact the rendering process the same way; some can be slightly heavier than others. When a browser initiates a web page, it will go through some steps: the first is Layout, the second is Paint, and finally, the Composite. If we choose to animate a property that triggers Layout, like width, the browser will repeat the paint and composite. For that reason, the use of properties that only activate the composite step, like transform and opacity should be prioritized. You can check the full list of CSS properties and their triggers.

Transform property

As mentioned before, the transform property is one of the cheapest to animate. However, this does not mean it’s a limited property. In fact, it allows doing a lot of this to the element, including:

• translate ( x , y ) — Move an element x pixels horizontally and y pixels vertically. Negative values will move left or up and positive ones will move right or down.
• rotate( y ) — Rotate an element y degrees. Positive values for clockwise and negative for counter-clockwise movement. The effect will happen over the center of the element by default, change it with the transform-origin property.
• scale( x , y ) — Alter the size of the element. Given two values, x and y, it will change the width of the element x times and the height y times. Given only one value, like w, it will change both width and height w times, keeping the initial proportion of the element. It can be used scaleX( x ) and scaleY( y ) to only target width or height correspondingly. Values above 1 make the element bigger and between 0 and 1 smaller.
• skew( x , y ) — skews the element x deg horizontally and y deg vertically. You can specify only one value, but the effect will only affect the X-axis, the y will be set to 0. Just like scale, you can specify this action for the X and Y-axis individually with skewX() and skewY().
• matrix( scaleX() , skewY() , skewX() , scaleY() , translateX() , translateY() ) — the matrix allows to easily combine all the methods above.

All the previous effects will be applied to the centre of the element unless the property transform-origin value is changed. That value can be 1 or 2 percentages or even the following values: top, bottom, right, left and centre.

If you tried to explore the code of some of the previous animations shown here, you may notice that we are not using the transform property all the time. However, that does not imply that you can not do the same animations using only transformations. To show that, we created both effects using the transform property. Check below all the alterations needed; you’ll be surprised by how easy it is to do the same effect without changing the HTML structure.

Performance of CSS Animations vs Javascript

Animations done through JavaScript are managed on the main thread of the browser where the layout and painting also happen. CSS animations, depending on the properties that are being changed, can occur in a separate thread called the compositor thread. If the browser takes more time on more demanding tasks, main thread animations will be compromised and interrupted, whereas compositor ones won’t be affected and will keep going smoothly. So, if you choose Javascript, you are more likely to have missing frames on your animations.

Conclusion

In sum, making animations using CSS and the transform property should be a priority. They are easy to do, especially for those who already get the hang of it and know precisely the goals to achieve. Nonetheless, it’s important to be careful regarding animation’s excessive use since it can lead to performance issues and cause an overwhelming situation for the user.

Found this article useful? You might like these ones too!

• 5 Essential Front-end Development Tools
• How To Use CodePen To Speed Up Your Front-end Development
• JavaScript Async Patterns Quick Guide

Originally published at https://www.imaginarycloud.com on October 29, 2020.

If you are here, you may be wondering “ How can React Native and Expo help me building my next mobile application faster? “.

As interns at Imaginary Cloud, we were proposed to develop an application that was somehow useful for the situation that the world currently faces, the Coronavirus pandemic. Due to this situation, we have to adopt new proceedings about how we manage common areas in the company. Since we now have limitations in how many people can be in the same room according to its size, we need to reduce the spread of the virus by grouping people who share the same work area.

Also, it is our intention for this application, to raise awareness by showing some warning messages, and to track the availability of a room without visiting it.

As a result of these constraints, our goal was to solve this problem by developing an app using these React Native and Expo. We were not familiar with any of these, as you might not be, so don’t worry, with some reading and practice you’ll understand how they work and why they are a good choice when it comes to mobile app development. That’s why we think it’s important to share our journey and some lessons learned from our experience.

This post might help you ramp-up your next project, and we hope this may enlighten your next steps and what advantages it brings. In this blog post, we are going to talk about these two frameworks, how they are related and why this might save you some time, even if you are not familiar with mobile development. But let’s start with the very basics of these technologies.

What is React Native?

React Native is an open-source framework for building native apps with React created by Facebook and released in 2015. It allows you to use native UI controls and to have full access to the native platform provided from the comfort of a JavaScript library. React Native makes it easy to simultaneously develop for both Android and iOS as the code can be shared across platforms.

Plus, this framework combines the user experience of the native platforms with the developer’s knowledge of building with React on the web, supporting the desired approach of “learn once, write everywhere”.

What is Expo?

Expo is a framework and a platform for universal React applications. It supplies a set of tools and services that simplify the development and testing of React Native apps, offering/giving the possibility to run the code on your phone easily. Besides that, Expo provides a more robust and developer-friendly workflow.

How to install React Native?

Setting up the development environment might be different depending on the experience you have with mobile development, but that’s not a problem.

If you are new to mobile app development, the easiest way to get started is with Expo CLI.

If you are already familiar with mobile app development, you may want to use React Native CLI.

We are going to cover the set-up for new mobile developers, because even if you are familiar with mobile development, Expo is a really nice framework to use and easy to learn.

How to install Expo?

There are two tools that you will need to develop apps with Expo: a local development tool and a mobile client to open your app.

As a local development tool, we use Expo CLI. In addition to the command-line interface (CLI) it also has a web-based graphical user interface (GUI) that pops up in your web browser when you start your project.

You will need Node.js in order to install Expo CLI. After installing Node.js, you can now install Expo CLI by running the following command: npm install -g expo-cli

Now, after you follow all the steps, that we already covered on this blog, all you have to do is run the following command, with a project called for example “MyProject”: expo init MyProject

Advantages of using React Native

You must be wondering why you should use React Native. We are going to talk about some advantages when using this framework.

1. Code Reusability: with React Native you will be able to develop cross-platform code, without the need of building one app for each platform. Most of the written code in React Native can be reused for both OS (Android and iOS).
2. Pre-built components: Even though this framework is new/young, you can find already built components that you can use in your mobile application. React UI frameworks like Material UI provide you pre-built components for faster and simpler development that can be adjusted to your needs.
3. Real-time feedback: Fetching real-time data and generating updated UI when something changes on the code is one of the greatest React Native’s features. When you are building your app, you need to view your code changes and you have two options. Live Reload is useful when you need to reload the entire app when a file changes (for example, to test routes/navigation). Besides that, Hot Reload can be helpful when you just want to refresh the files that were changed without losing the state of the app.
4. Performance: React Native performance is almost as good as native performance. The fact that the programming language is optimized for mobile devices and the use of two separate threads (one for native APIs and the other one for the UI) makes it possible to run React Native apps efficiently.
5. Popularity: Although React Native is a newcomer for building cross-platform mobile apps, it already has significant popularity being used by the largest companies. Just to have an idea, the GitHub community of React Native is already much bigger, in the number of contributors than Swift for example.

According to Google Trends, as we can see from the chart above, researches related to React Native has been rising, which shows the growing interest and demand for this technology.

Moreover, according to the Stack Overflow 2019 survey, React Native was the 6th most popular framework among developers. Also, the number of questions on Stack Overflow related to React Native has been increasing since its release.

Is Expo easy to learn?

According to our experience, Expo makes things really simple when talking about running and debugging. You can run your app for testing without any effort or check some errors, and even debug your app. This is, for sure, one of the reasons why the Expo’s popularity has increased as we can see from the chart below.

After the set-up is completed, if you want to run your app to see how your progress is going, all you have to do is run the following command: npm start. After that, a window pops up in your web browser. You can test it on simulators, both for Android and iOS, but you can also run in your own device, you just need to install the Expo client app and scan the QR code you see in the terminal or in Expo Dev Tools. Note that Expo is not only a framework but also a platform where you can find a lot of useful documentation, tutorials, examples from the community, and even become a contributor on GitHub.

What if you want to get rid of Expo?

You may be wondering if it is possible to continue your project without using Expo on it. Yes, it is. If you are having a bad experience developing your app using Explo CLI, you can easily leave it and move for a React Native bare project.

What is this about the React Native bare project? Simply, your project will include the folders/directories related to the operating systems (iOS and Android) thus allowing you to create your own native builds. So, for example, if you know that you will eventually need to include your own native code in the project, you can eject expo running the command npm run eject on the console.

Expo Build

When we think about the process of building a mobile app, we can think of it as a complex process. For this reason, Expo tries to simplify and speed up the whole process. In the official documentation, they explain in detail all the steps you must follow and even give you the opportunity to auto-generate the keystore and credentials needed for the application.

The keystore allows you to store cryptographic keys in a container to make it more difficult to extract from the device. Once keys are in the keystore, they can be used for cryptographic operations with the key material remaining non-exportable. Moreover, it offers facilities to restrict when and how keys can be used, such as restricting keys to be used only in certain cryptographic modes. So, you don’t need to worry about all these details, since Expo automates the process of signing your app for iOS and Android.

Building an app with React Native and Expo

We had our first contact with these frameworks as soon as we started our internship at Imaginary Cloud. Here we started working with React Native and Expo as part of developing a mobile application for an internal project.

In the beginning, it was tough to understand how to work with these technologies as we were just starting. It was a new world for us. However, the documentation available, as well as the help of our colleagues, were very important aspects in the development of this project. It is completely normal if there are any doubts or questions regarding these frameworks at an early stage. During the development, these doubts are dissipated to give place to knowledge and experience. The use of some React Native libraries as well as some pre-built components, not only saved us some time, but also made it easier for us to do the work.

In spite of React Native helping us reuse code for Android and iOS, there were certain details that we had to take into account due to the differences between OS. For example, the line-height property of some fonts, couldn’t be the same for both platforms, or else users would notice different styles from the iOS app and Android app.

One of the most challenging problems we faced was how to load fonts in our app. We tried a lot of different tutorials, we searched a lot, and we lost some time trying to use a custom font, but the final result was worth the effort.

Another of the difficulties came from the use of pre-built components. React Native is sensitive to packages and their versions, and it is necessary to bear in mind that some things work in React Native but are not yet supported by Expo, so it is necessary to look for other solutions.

For instance, we used a pre-built picker select but its latest version was not compatible with Expo, more precisely on Android, so we needed to downgrade it. Not everything is easy. Sometimes you have to find another way to reach your goals. Nevertheless, as you probably noticed, React Native and Expo can simplify a lot of things and help you save some time.

Overall, our journey working on this project was very positive. As it was our first experience/time working with React Native and Expo, we felt some difficulties in the beginning but as we started to know more about these technologies, it became easier and natural.

We learned that it is possible to easily run an application on our own device and to see the changes on the code almost immediately, which ended up justifying the comfort we felt when using React Native with Expo. In addition, the variety of APIs they offer helped us to reach further on our goals. For instance, Expo-Notifications was useful to us, providing essential features in the scope of notifications.

To conclude, our knowledge increased and it was a very enriching project on how to develop a mobile application, using these frameworks. We realized its advantages and allowed us to reach our initial goals.

At Imaginary Cloud we work not only with React Native, but with a wide tech stack. If you need help building a scalable mobile app, we are waiting for you! Drop us a line here!

Found this article useful? You might like these ones too!

• 5 common errors in a React Native app when using Expo
• How to find experienced React Native developers
• React Native vs Flutter for app development

Originally published at https://www.imaginarycloud.com on September 10, 2020.

Companies are switching to a serverless architecture. It results in a shorter time to market, decreases operational costs and developers can focus on improving applications instead of managing infrastructures.

If you are new to this concept, you might be asking: What is a serverless application? Basically, it’s software that runs in an environment where you don’t need to manage any servers. The host that provides it, is fully responsible for managing all the infrastructure and operational tasks.

One of the solutions that address this, is AWS Lambda. According to a report by Datadog, in less than 5 years AWS Lambda is used by half of the AWS users and is most common in the largest environments.

As a trainee at Imaginary Cloud, I had a project in hands: an application called Dwipper. It consisted of a social network to share shower thoughts (similar to Twitter). I needed to have a backend supporting all the essential operations like authentication and processing data. AWS Lambda could offer all I needed for the backend with the integration of other services AWS offers, such as Cognito, API Gateway, DynamoDB, CloudWatch, CodeCommit and CodePipeline. I even didn’t need to worry about managing servers. But before going straight to the application developed, I want you to understand what AWS Lambda is.

What is AWS Lambda?

AWS Lambda, provided by AWS (Amazon Web Services), is a serverless computing service that allows you to run code with no need to worry about the infrastructure or managing servers. Code executed on AWS Lambda is called Lambda function and once created, it’s ready to run when triggered.

This function can be associated with a specific AWS resource. For example AWS SNS (Simple Notification Service), that is a messaging service. As soon as this resource changes, Lambda executes your function and manages what is needed.

How does AWS Lambda work??

The first thing to do is to create an AWS account. In case you don’t have one, you must configure it. Amazon IAM (Identity and Access Management) provides user management and permissions in AWS. If you’re working as a team, you might need to create an IAM user to give the necessary permissions to your AWS console or in case your application needs to make API calls to AWS.

The next step is to set up your serverless backend, choose what services you will need, configure them and finally, to create your Git repository so you can start working on your application.

Now you can start by writing code in any language supported by AWS Lambda and upload it. You can also write your code in the code editor that Lambda provides. Then you set up your code to be triggered from other AWS services or in-app activity. Lambda receives your request and runs your code only when triggered.

Advantages of using AWS Lambda

AWS Lambda gives you a lot of benefits that you probably should know before choosing any other serverless computing service. If you’ve already asked yourself why to use AWS Lambda, take a look into the main advantages below.

Support multiple languages

For the time being, AWS Lambda does not support all programming languages. But it does support Java, Go, PowerShell, Node.js, C#, Python and Ruby code. For each one of them, AWS provides an SDK that makes it easier for you to write your Lambda functions and integrate them with other AWS services. It also provides a Runtime API, which allows you to use any additional programming languages to author your functions.

Minimized cost

In AWS, you pay only for the compute time you consume. You don’t have to pay for the service to host your code. Instead, AWS Lambda bills you based on when that code is executed. You are charged based on the number of requests and the duration, so this excludes the unused minutes of server time.

Fully managed infrastructure

Once your functions are running on AWS infrastructure, it takes care of servers for you. This way, developers have more time to spend improving the product instead of performing operational tasks such as managing the network layer or taking care of scalability.

Automatic scaling

Let’s imagine that from one moment to another, your application gets loads of new users. This might be a problem if the server is not prepared to handle a massive number of requests. With AWS Lambda you don’t need to worry about it, as the application scales precisely with the size of the workload. It automatically scales your functions according to their demand, so different parts of your application can scale differently according to current usage levels.

Integration with other AWS products

AWS Lambda integrates with AWS services as DynamoDB, API Gateway, Cognito and many more. Each one of those services sends data to your function in JSON as an event that Lambda runtimes convert first into an object, passing it after to your function. All of this allows you to build an application fully functional within your Lambda functions.

When to use AWS Lambda

Like any other computing platform, AWS Lambda is better suited for some scenarios due to its characteristics. First, we will cover in which scenarios it would be a suitable computing service, checking what AWS Lambda used to be, as you can see below:

File processing

Imagine that you have an application to upload pictures and resize them to a variety of different sizes. Your application stores those pictures in an Amazon S3 bucket, so probably there’s a Lambda function doing this job of resizing pictures. Amazon S3 is one of the supported AWS event sources that can publish object created events and invoke your Lambda function. All of this is entirely automatic, and there are no servers to manage. Your Lambda function code can read the image object from S3 bucket, create the resize version, and finally save it in another S3 bucket.

Data and analytics

Imagine you are building an application that has data that you need to store. You can use DynamoDB for that, a fully-managed database service, handling write an update and delete items in a table.

Websites

Imagine you are building a website and you want to host the backend login on Lambda. Lambda is excellent for this, as the web frontend can send requests to Lambda functions over HTTP endpoints using Amazon API Gateway.

Mobile applications

Like websites, Amazon API Gateway can be useful for mobile applications, but it doesn’t end here. You can create, for example, a Lambda function to process clicks within your application.

In addition to these scenarios where this service suits better, it is good to keep in mind the limitations that Lambda carry and realize if it’s actually the best service to integrate into your product.

AWS Lambda limitations

Latency

Serverless functions mean you will be dealing with a cold start time. When a function is triggered, there may be a small amount of time waiting between the beginning of the call and when it runs. If this function hasn’t been used in the last 15 minutes this time can be very high, 5 seconds or more.

This can be a potential issue to consider if your workloads are time-sensitive. Some workarounds try to avoid it, for example, keep your functions small and focused, as cold start times increase linearly with memory and code size.

Function Limits

The Lambda functions have some limits such as run time, memory, size and concurrency. The maximum time a function can run is 15 minutes, making Lambda unsuitable for long-running workloads. If your function typically takes more than 15 minutes, AWS Lambda might not be a good solution. The amount of RAM available to the Lambda functions range from 128MB to 3,008MB, in 64MB increments. There is a limit of 75GB as well for all AWS Lambda functions that have been deployed. To avoid this limit, make sure you don’t keep old versions of your Lambda functions. By default, the concurrent execution for all AWS Lambda functions within a single AWS account are limited to 1000. Any Lambda execution triggered above this limit will be forced to wait until other functions finish running. To avoid this, you can request a limit increase by contacting AWS support.

Not always cost-effective

At first glance, the pay only for what you use can produce significant cost savings, but it might not be that way every time. Several factors determine the cost of your Lambda functions and working out this cost is not easy.

If the load for your application increases, this will increase proportionally and might end up being a high cost. You need to have in mind that any other service you decide to use along with your Lambda functions, like API Gateway, CloudWatch or any other, will add to that cost. So you should consider how much you expect your application to scale.

Comparing AWS Lambda with other alternatives

AWS Lambda is not the only serverless service that you can choose for your project. On this topic, you can see other alternatives to Lambda, very similar to it. With a couple of differences you might want to consider when choosing which serverless service to use.

AWS Lambda vs Azure Functions

AWS Lambda and Azure Functions both support Node.js, Python and C# but Azure Functions also support F# and PHP. They also support automatic scaling.

AWS Lambda has a straightforward programming model, while Azure Functions has a more sophisticated one, based on triggers and bindings. The binding system provides extra flexibility, but it also brings some complexity. Both services can run multiple executions of the same function simultaneously.

If you want to add HTTP integration, with AWS Lambda you will have an additional cost, as we already saw, you pay for additional services. On the other hand, Azure Functions come with HTTP endpoint integration and there is no extra cost.

AWS Lambda vs Google Cloud Functions

AWS Lambda and Google Cloud Functions both support Node.js, Python and Go. Lambda allows for unlimited functions, while Google Cloud Functions allows just 1000 functions per project. They also support automatic scaling.

In terms of the maximum execution time of a function, AWS Lambda stays ahead with six more minutes than Google Cloud Functions.

Regarding payment, just like AWS Lambda, with Cloud Functions you pay only for your function’s execution time. You are not billed when your function is idle.

AWS Lambda vs Kubernetes

AWS Lambda and Kubernetes are two different realities. While Lambda is all about going serverless, Kubernetes is all about containers.

On AWS Lambda, you don’t manage the infrastructure and you can’t install any extra software. On Kubernetes, you have to manage the infrastructure and you can install additional software.

Those are just some of the significant and main differences between both of them. In conclusion, if you want to have complete control of the environment, go for a container service like Kubernetes. If you want something more manageable and focus more on improving the product itself, you should choose a serverless service like AWS Lambda.

Other services AWS provides used in our backend

AWS Cognito

AWS Cognito is a service to manage authentication. You can add user sign-up and sign-in quickly and easily. It still supports sign-in with social identity providers, such as Amazon, Google, and Facebook. It even provides a User Pools feature to help you manage user accounts.

AWS API Gateway

This Amazon service handles all the tasks involved in accepting and processing API calls. It allows developers to define the HTTP endpoints and connect them with the corresponding backend. API Gateway can also validate if the user is authenticated by adding an authorizer to an endpoint mapping connected to a Cognito user pool, meaning that only users in the user pool can access the endpoint.

AWS DynamoDB

AWS DynamoDB is a fully managed database that can scale automatically and allows to create database tables that can store and retrieve any amount of data.

AWS CloudWatch

Cloudwatch is a service to monitor all your AWS resources, applications and services that run on AWS. It collects data in the form of logs, metrics and events that you can check to quickly solve issues and keep your application running without any trouble.

AWS CodeCommit

CodeCommit is a source control service that helps teams collaborate on software development, allowing them to import and host private Git code repositories securely.

AWS CodePipeline

AWS CodePipeline is a continuous delivery service that automates the build, test and deploys phases of your release process every time there is a code change based on how you defined the workflow.

How we built a serverless application with AWS

As mentioned before, we integrated some other services with AWS Lambda to build our backend. Our application Dwipper consists of a social network to share thoughts, called Dwipps, where users need to register to start sharing what is on their minds. The functionalities built are:

• register
• login
• recover password/change it
• see all Dwipps from all users
• upvote a Dwipp
• mark a Dwipp as favorite
• create a new Dwipp
• delete and edit a Dwipp
• see the user’s own Dwipps.

We integrated DynamoDB as our database, where we store all the Dwipps created by users from our application, as well as editing and deleting them.

For authentication, AWS Cognito was the solution. It provided an easy management of user authentication that was needed for clients to register their email, generating tokens easily for each user every time they log in to have access to specific content.

To create the REST API and generate the necessary endpoints for all the flow of our application, we integrated Amazon API Gateway. We had to configure AWS Lambda to run our code in response to HTTP requests using API Gateway, which can validate the token generated during login and inject the user data into a lambda environment execution.

Starting with the authentication, we used Cognito User Pools in our function to create a new user account. Regarding the registration, it asks for email and password and the function gets those values, sending them to Cognito and returning the response whether the user has been successfully registered or not. The endpoint is configured in a separate file with the other endpoints, where we put its function. For the login function, we access Cognito once again, sending the user data. In case that user exists, Cognito returns a token needed for the user’s access to the application’s content.

One crucial function is to show all Dwipps from all users. For this one, we need to access DynamoDB, to get the specific table and return all its content. The function to create a Dwipp is basically the same, but instead of getting all items from the table, we want to insert a new item there. The unique ID for each Dwipp is created with uuidv4, a JavaScript package that helps create IDs. The ID and content of the new Dwipp are sent to that table with each field in its column. The user needs to have a token that was generated during the login, the API Gateway validates this token and injects the user data into the environment of the lambda execution. This way, we can identify the user trying to create a new Dwipp.

To upvote a Dwipp, we use the same table as before. But for the favorited Dwipps, we had to create a new table. For the first table, we have a function that checks the current user’s email address and if it has already upvoted the Dwipp registered in the table. If yes, the number of upvotes decreases by one and the email address is removed from the list. If not, it increases by one and the email address is added.

As for the function to mark a Dwipp as favorite, we check if that Dwipp is already in the favorite Dwipps’ table. If it’s there, we confirm if that user already favorited it before. If not, a new favorited Dwipp is added to that table. The information of users that favorited a specific Dwipp are kept in the table as well.

With all those available and easy-to-integrating services, we built a working application with authentication and some functionalities in less than one month.

In the beginning, our idea was to use both AWS Lambda and Google Cloud Functions. We’ve decided for AWS as it provides tools for user creation and authentication, while Google Cloud Functions does not. Everything lives up to expectations as all the required functionalities were possible to implement with only AWS.

It may seem like a big deal to understand all those services at first sight, but AWS provides complete documentation clarifying each of them and useful examples. If you take some time to understand it, start trying it out and test it, you will quickly be able to create a full working backend for your application: free of server and infrastructures management, in a short time and with a reduced cost.

Found this article useful? You might like these ones too!

Originally published at https://www.imaginarycloud.com on August 20, 2020.

If you’re starting a new project or building a mobile application, React Native likely pops up as an option when deciding which tech stack to use. As a cross-platform tool, it’s a cost-effective alternative to native apps, as you don’t need to have two development teams: one for IOS and another for Android.

All good so far. But, how can you find experienced React Native developers that can bring your idea to life?

Should you hire a freelancer?
A permanent in-house developer?
Or an experienced React Native developer from a trusted software development partner?

If you already asked yourself any of these questions, keep reading. It’s what we’ll cover below.

Why is it so hard to hire React Native developers?

Hiring the right person is never an easy task. It’s often a time-consuming process, sometimes, with no guarantee that the developer hired will be up for the challenge. In case you identified yourself in one of the previously mentioned scenarios or already started a recruitment process, you’ll probably encounter a few obstacles in the way.

But why is hiring a React Native developer so difficult?

A lot of job search platforms (finding a needle in a barn)

If you’re based in the UK or US, you’ll agree that hiring a talented React Native developer can be quite challenging. There are many freelance platforms (Upwork, Toptal, Fiverr, etc.), outsourcing companies, job search boards, and other tools that make it challenging to find the right person.

The rise of cross-platform apps vs native apps

React Native is king when it comes to choosing a cross-platform tool to build a mobile app. Part of it because, with React Native, developers can build mobile applications for Android and iOS using JavaScript. And we all know that almost every developer knows something about JavaScript (React, Node.js, React Native). It turns out that this “something” may not be enough for what you need.

The urgency behind the projects

Conducting a recruitment process on your own is a time-consuming process. From the moment you release a job offer, your inbox can be either flooded with applicants (which is then followed by a hard part of the screening, interviews, technical assignments, etc.) or empty for weeks. The software development industry is in high demand, so if you are in a rush to release your product and you need to find someone quickly, you could use a hand from a trusted software development partner.

The “Bermudas triangle” (as we call it)

As there are no perfect companies, there are no flawless candidates. As you look for perfection, you might come across different personalities, experiences, and technical backgrounds. What is often called cultural fit means finding a balance between the company values, what is expected from the mentioned position, and how easy it would be for a new team member to feel onboarded. Which skill are you going to value the most? An impressive experience? A humble yet confident attitude? Or an in-depth knowledge of React Native? We believe it is a mix of these three skills, in the right doses.

Why do you need to hire a React Native developer?

Understanding your needs and acknowledging the phase your company is going through, is a great way to start. It might seem obvious, however, in such a high demand industry as software development, hiring an experienced React Native developer can be a struggle. Thus, you need to have a clear view of what your company needs to thrive and how that person is going to help you achieve that.

Let’s take a look at three typical case scenarios where you can probably link your company to:

Scenario 1: Early-stage startup

If your company is a startup in an early stage, having no time to lose is like a mantra. Investors are usually hungry for results and you need a faster time to market to test your mobile application. With this in mind, building an MVP is an option to consider, which means that your best way out is to hire an experienced React Native developer who can boost your development.

Scenario 2: Native to Cross-platform app

Hiring a React Native developer can be difficult if you do not have a clear understanding of what you need both in the short and long term. Let’s say that you already have an iOS app. However, you’ve identified that the Android market has a strong potential in terms of business, and now you need to make the Android version of it. Instead of hiring an Android team, a possibility is to hire React Native developers to help you build a cross-platform mobile app. It comes up as a way of having a shared codebase for both device families and saving money in the long term, as you don’t need to have two development teams.

Scenario 3: Web product to mobile application

In case you have a web application built by your in-house development team and need to create a mobile version of it, adopting React Native can be a great option in terms of cost/benefit. Depending on your team size and allocation, if your front-end developers already have a background in React, the transition to React Native is smoother. This way, you can only extend your existing team with expert React Native developers instead of hiring a whole new team for Android or iOS.

Scenario 4: You have the product, the team, but lack the background in React Native

If you don’t have a tight deadline but expect that you’ll need to develop a mobile application soon, you can always ask your developers to learn React Native. It may sound like a cost-effective way to handle the situation, especially if they already have a JavaScript background. They can learn online from Pluralsight, Codecademy, Bootcamps, or other online learning platforms. However, do not forget that usually learning a new framework has a ramp-up time, as it happens with almost all programming languages. If you’re going to build a mobile app from scratch, make sure that the lack of experience on this specific framework doesn’t compromise the outcome.

For each of these scenarios, there’s an ideal way to promptly hire your talented React Native developers while guaranteeing an ideal skill set. Searching for the right talents can be daunting, especially in an industry like software development with such high demand. But it doesn’t always have to be like this. Especially if you know your options.

How to find trusted React Native developers?

Hiring the right React Native developer to your team starts by knowing how to find them. To streamline this process a little, we identified your leading solutions:

1. Hire an in-house React Native developer on your own

This might be your first option when you think of recruiting a new team member. You can set a budget, align expectations in terms of the candidates’ experience and background, create your job offers, and advertise them on job boards such as Glassdoor, Indeed, LinkedIn, Landing.jobs, Stackoverflow, etc. Here are the pros and cons of this process:

Pros:

• You can control the whole process;
• The developer will be part of your team, sharing your culture and getting involved in the long term projects;

Cons:

• Time-consuming (screening and interviewing candidates);
• Competitive industry (high demand for React Native developers, which makes it harder to find the right person);
• High-risk for a bad fit, as your budget or process are not tunned

2. Hire a freelancer React Native developer

If you’re not that into hiring someone permanently to your team, finding a contractor or a freelancer can come up as an alternative. You can search for React Native developers on platforms like Fiverr, Upwork, or Toptal, and conduct the screening process based on the candidates’ profile, projects for which they contributed directly as React Native experts, and reviews of their work.

Pros:

• Cost-effective for short term projects;
• Public reviews from other companies which eases the initial screening process;

Cons:

• Time-consuming (as you still need to conduct interviews);
• Lack of engagement as this person will not be entirely part of the team;

3. Contract a React Native expert from a trusted partner (software development company)

On average, it takes four weeks to hire a React Native developer on a more traditional approach, like the ones mentioned previously. But it doesn’t always have to be this daunting. If you’ve never considered contacting a staff augmentation company who’s expert in software development to help you with this, you may not be aware of its advantages due to the common misconception of being a more expensive solution.

Pros:

• Easier Integration with an In-House Development Crew: companies have a development process and can adapt or improve yours. (freelancers and new team members will spend considerable time finding out how to work together as a team.
• More flexibility, as the days invoiced depend only on the number of days dedicated to your project. (time and materials monthly invoice)
• Higher code quality & overall quality levels. Working with an experienced team has the big plus of getting meaningful advice on the best direction to go or on the best way to do it to avoid costly mistakes.
• Faster hiring process, as React Native developers are ready to join your team remotely.
• Higher scrutiny, since companies have a reputation to maintain as a brand (while a freelancer platform delegates this reputation to the freelancer itself)

Cons:

• For some, the budget may be a concern as you might think that extending your team with a React Native developer from an expert software development company can be more expensive than an in-house developer or a freelancer. It also depends on the number of hours required from one developer and if the project is short or long term.

To partner with a software development company saves you time and money when you decide to hire a React Native developer.

Why are we so picky when hiring React Native developers?

Here at Imaginary Cloud we are experts in web/mobile app development and UI/UX design. Over the last decade, we have been hiring only the best developers and UX designers in Portugal. We have multiple projects for top clients worldwide, and it’s our way to guarantee the best performance and quality of the work delivered. Hiring React Native developers is not an easy mission, just as retention of those talents. We want our people to be at their best every day. This is why we have excellent working conditions with tons of space and natural light, along with competitive salaries and other benefits.

According to Glassdoor, it takes 120 candidates to make one engineering hire. Over the years, and learning from our own mistakes, our HR designed a process that ensures we can reduce our margin error in the hiring process. After releasing the job offer and spreading the word, this is how our recruitment process looks like:

Phase 1: Basic technical assessment (to ensure that the knowledge baseline that we need is there or not)

Phase 2: Interview to make sure there’s a fit with the company’s values, team, and culture.

Phase 3: Technical assessment suited to the role

Some might say that we’re picky, but we do it intentionally. We want to make sure that we’re hiring a person that shares our vision of creating digital products that improve people’s lives while being skilled at it. For this reason, when hiring a React Native developer that will later join a client’s team to build a mobile application, our specialized HR team works together with our Senior developers that conduct all the technical interviews. Our retention speaks for itself: 91% in 2019.

What our clients say about our team

We’re proud of the way we work. Having in our team the best React Native developers in Portugal and delivering the best of breed digital products to top clients worldwide is rewarding. But above that, we’re grateful for knowing that our clients are happy with our performance, grow with us and recommend us to other players as they feel we’ve contributed to their success.

Find experienced React Native developers with a software development partner

Hiring a React Native developer can be a struggle if you do not have a clear understanding of what you need both on a short and long term basis.

While it can be time-consuming to hire on your own or make sure a freelancer has all that takes to perform well, recurring to a software development partner can be extremely helpful when:

• You have a new product to develop in a short time to market, and you can’t invest a lot of time in a recruitment process from scratch;
• You don’t have a lot of experience hiring React Native developers, such as designing and conducting technical assessments, that are essential to evaluate the candidates’ performance;
• Your company is at a very early stage. You need experienced professionals that can not only boost your software development but also provide meaningful advice on how to perform;
• You need a React Native developer for only a few months or short term, where you don’t really need to hire in-house React Native developers.

At Imaginary Cloud, we have the best React Native developers in Portugal. We’re the #1 software development company in Portugal by The Manifest and we delivered more than 100 projects over the last ten years.

In need of React Native developers to build a mobile app or help you with an existing project? Get in touch!

Found this article useful? You might like these ones too!

• 18 Best Agile Practices to use in your software development life cycle
• React Native vs Flutter for app development
• Why you should hire a UX designer for your next digital project

Originally published at https://www.imaginarycloud.com on August 13, 2020.

Unless you have been living under a rock for the last few years, it’s unlikely that you have never come across User Centered Design (UCD). After UX and UI, it’s one of the most popular terms in the design field.

If you’re building a web or mobile app, you might feel that the recipe for success is to follow a User Centered Design approach. But do you actually know what is it about? Are you following a trend? Or do you really want your product to be user centered?

To answer all these questions, we’re covering below where this User Centered Design approach comes from, main principles and whether if you should follow it or not.

Where User Centered Design comes from

The term User Centered Design gained much popularity in the (not so) recent years. It was first introduced about 30 years ago in the book User Centered System Design: New Perspectives on Human-computer Interaction written by Donald Norman and Stephen Draper. In this book, the authors speculate about central issues and questions involving designers, creators and users, when developing software.

The 80’s were kind of a primordium time when it comes to interactive systems and, as you can imagine, software design was not that good. It quickly became clear that the visual part of the system was quite necessary.

What users see is what drives their expectations of what they can and can’t do with the system.

Human-computer interaction is basically a communication between humans/users and machines, both speaking very different languages. Part of the earlier work done with User Centered Design was adapting a language already expressed by users, highlighting their needs and skills to turn complex software into something understandable and usable. So, at this time, the user needed to be at the center of the process.

In the 90’s, as computers evolved from work tools to social and personal tools, there was more to be addressed than just usability and productivity. Designers began to think about the user’s whole experience, hence the term user experience: powerful words that companies would use to differentiate themselves.

The years that followed were crucial in the interactive systems field. Not only because gradually, almost everyone began to have a computer at home, but also due to the globalisation of the world wide web.

The opportunities to create new software and interactive systems were growing. More companies would focus on this field using the User Centered approach to deliver products with a good user experience. As you can see from the image below, the popularity of the User Centered Design was at its peak about 20 years ago.

From this point on, the User Centered Design process has become a sort of dogma that designers would follow without much questioning to achieve a good user experience.

The principles of User Centered Design

But why has User Centered Design become so popular among designers? How does this approach possibly lead you to a better user experience? I think the answer lies in its principles.

Every product is unique in terms of needs, requirements, tasks, phases and even team.

The UCD approach is entirely adaptable to different scenarios. Nonetheless, some User Centered Design key principles that should be present no matter the scenario:

1. Understanding the user and task requirements;
2. Integrate the feedback from users when defining both requirements and design;
3. The user is actively involved in the evaluation of the product’s design since an early stage;
4. The User Centered Design should be incorporated into other development activities;
5. User Centered Design is an iterative process. This means that you should repeat the process until you have reached the best solution possible.

Why is User Centered Design important?

When users are at the center of the process, it is more likely that decisions made are not biased, made of assumptions or to rely only on information gathered from them. Since the UCD approach contemplates a lot of analysis and feedback, designers can make important changes right in the earliest stages of the design process. As you can imagine, applying this method avoids design modifications in more advanced stages, which ends up being beneficial in terms of costs.

David Benyon, a professor with over 25 years of experience in the field of Human-Computer Interaction, names 4 ways in which UCD can be helpful:

1. A UCD approach can potentially increase the sales of a product. Having the user involved in every phase of the process means that you have a better understanding of requirements and expectations. Once these are met, you’re more likely to deliver a better product, which leads to more sales.
2. It leads to safer products. A product that is designed for specific tasks and contexts has fewer chances of human error.
3. Because the design team is in closer contact with users, they develop not only a deeper understanding but also a stronger sense of empathy towards them.
4. A UCD approach leads to more inclusive products. By leaving biases out of the process and focusing on all the different types of users, the design team can acknowledge all the differences between them. Whether they be in terms of age, culture or language, designers can attend them.

User Centered Design as a quality stamp

The term User Centered Design gained so much popularity that it started to be associated with good practices in the field of user experience. Nowadays, most product owners want to be able to show that they are doing User Centered Design. However, not all of them understand exactly what is involved or are not willing to invest in it. There is almost a kind of pressure to say for you to follow a User Centered approach, may it be true or not.

Involving users is not a free option. It’s like the old saying, “you have to spend money to make money”. Nevertheless, most of the product owners come with this paradox: they want their product to be user centered, but when the time comes to invest, the first thing to be cut off is user’s involvement, either by user research or user feedback.

Of course, there is also the case of product owners that already have a full concept with a prioritized feature list for a product that was created without any previous user research. This leaves no room for a User Centered Design approach.

Beyond User Centered Design

Donald Norman, the creator of UDC, is the hardest critique. He argues that designers accept the term with no questions asked and that it is also used without any criteria.

Like many fields, design and particularly, user experience design, is not a stagnated field.

Designers should not assume a particular process as a dogma without questioning it.

In an essay written by Norman, “Human-Centered Design Considered Harmful” he talks about how the process was developed: to improve software’s design and, therefore, the overall usability and understandability of products. For both human centered design and UCD, understanding the user is critical.

Norman also states two perspectives:

1. Most of the everyday products we use daily were not designed based on the user’s understanding, but the knowledge of the activity they were intended to.
2. History is filled with products that made users adapt to them and not the other way around.

Based on these points, understanding the user is essential. But knowing the activity and tasks that the product will have to accomplish is also equally important.

Designers are almost obsessed with creating a seamless experience, to create a product that is understandable almost by just looking at it. This is not natural. Technology is not natural. There is a learning curve, and people will need to adapt. This being said, our job as UI/UX designers is to create an outstanding user experience with the least pain points.

Think of this in this way: if you create a product that is super easy to use, but doesn’t entirely do what it was supposed to do, users will likely end up being disappointed. It’s not harmful to let your users explore your product for themselves to find out what the product is about and how to use it, as long as the activity is performed correctly.

Another important thing to consider is that, by focusing too much on individual users, you’ll likely create a perfect product for them, but a terrible one if you think of groups of users.

With that in mind, I don’t think that we should put aside understanding users. I do believe that we have to turn it down a little. It makes a lot of sense to me that focusing on the activity and tasks of a product is equally beneficial as understanding the user.

Our Product Design Process

With years of experience working directly with product owners, we developed our own process: The Product Design Process. We looked at already existing processes and techniques and merged those with our own field of experience and feedback.

As you can see, our process contemplates the user’s introduction in the process. Not only by conducting user interviews in the user research step, desirability tests on the moodboard, but also usability tests on the wireframes. However, those steps are not mandatory. Our advice is to put all the phases and steps at use when possible, but to adjust it to every project’s needs and budget.

The goal of our process is to achieve the best product possible while still being realistic. As I said before, our field’s reality is that most product owners don’t want to invest in user involvement, so we had to find ways around it.

Proto-personas is something that we do in almost every project. Unlike personas, proto-personas are based on the product owner’s existing knowledge or assumptions about the users. This is not perfect, yet, it has proven to be helpful. Since it allows us to baseline assumptions, it helps to avoid mistakes like elastic users, self-referential design and edge cases. It also provides a reference document that will help troubleshoot if the product is not received as expected by the users when launched. All this considering each project’s budget and effort.

The Decision Matrix step is equally important and sensitive.
After concluding the benchmark, personas and user journey, usually, everyone involved has many different ideas for features that the product must-have. In this step, those features are going to be prioritized based on both user and business goals. This way you can guarantee that you have a Minimal Viable Product (MVP), meaning that even under time and budget constraints, the team will develop a viable product.

What Norman said, here we can put it into practice. We don’t focus only on the user, we do our work to understand what are the expected activities and tasks and what they involve.

So, do you really want a UCD approach?

Now that you know better in what consists of a UDC approach, you can clearly decide whether to invest in it.

One thing is sure, you should not follow any approach blindly just because it’s popular or because all the cool kids are doing it.

First of all, you should be clear on what every approach implies and if you have the necessary team, budget and time. And, even if you do, is that approach the one that suits your product better? Maybe your product is small and doesn’t need all the steps of a method. Perhaps it is too big and the approach you are using is not the most applicable.

By being aware of an approach to follow, you may adapt it or combine some of its steps to fit your product and its goals better. This must be considered before compromising with a strategy so you can get best outcome possible.

Found this article useful? You might like these ones too!

• We’re sharing our secret sauce: meet the Product Design Process
• Why you should hire a UX designer for your next digital project
• The 4 most recent product design books every designer should read

Originally published at https://www.imaginarycloud.com on July 30, 2020.

When considering what to use for your next mobile application, you’ll have to do some research about which frameworks can provide you with the tools you’ll need. React Native is a top dog of the industry, while Flutter is a rising star. If you’re not sure which one to choose, this post will help you decide which one is best for your needs.

To learn more about both technologies, I’ve developed Dwipper: a social network app (similar to Twitter) that one can use to post shower-thoughts (Dwipps).

Hybrid vs Native

Full disclosure: you should only look for a hybrid framework when you want your application to work on iOS and Android. Otherwise, you are better off sticking to native development for performance improvement, debugging, testing, and a simple way to release your application. Hybrid development makes the process faster and, therefore, cheaper while increasing the potential number of users. Native development, however, offers better performance and improved data protection.

What is React Native?

React Native is an open-source mobile application framework created by Facebook, released in March of 2015. It’s used for both mobile and web applications, by enabling developers to use React and other native platform capabilities. Being built on top of ReactJS and Javascript, it’s likely that developers that are used to such languages may find a preference for React Native over other frameworks.

What is Flutter?

Flutter is an open-source UI software development kit created by Google, released in May of 2017. It’s used for both mobile, desktop and web applications, all from the same codebase. Based on the object-oriented programming language Dart, those with a preference for those types of paradigms may prefer Flutter.

While Flutter comes with its material design guidelines, one may be inclined to use it. However, there’s no inherent problem with not using it, as Flutter was created with a custom brand design in mind. It just happens to have some material design as a bonus.

Which one is more popular: React Native or Flutter?

To give you some insights on how popular both frameworks are, here’s a graphic displaying the number of questions on StackOverflow that React Native has compared to Flutter.

As we can see, Flutter rapidly gained traction, especially since 2018, in a way that since the end of 2019, StackOverflow has had more questions asked about Flutter than React Native. Flutter became slightly more popular as Google has been investing a lot of time into it.

Is React Native easy to learn?

Since it comes from JavaScript, it’s easier to learn and debug than other languages. It means you have a more straightforward approach to development. However, that ease comes at the cost of many errors people may find in their code, in runtime, because JavaScript is not a strict language. To avoid this, Facebook, React Native’s creator, suggests Flow, a type checker. It allows the inclusion of annotations on JavaScript to infer types and identify undesirable behavior, that is used to mitigate this issue by identifying problems as the code is being written.

Is Flutter easy to learn?

In a vacuum, Flutter is not as easy to learn as React Native. Nevertheless, a background in either Dart or any other Object-Oriented Language will make your life easier. Due to its increase in popularity, finding help online is quickly done and hardly any trouble.

How does React Native work?

React Native offers components equivalent to React’s web counterpart. Span in React is Text in React Native, which would be equivalent to UIView in iOS and TextView in Android.
Two threads are intrinsic to each React Native application:

1. The main thread runs a standard native app, handling the display of elements and processing user gestures.
2. The other executes all the JavaScript code in a separate engine, either JavaScriptCore or V8, which deals with the business logic of the application. It also defines the functionality and structure of the user interface.

These threads never communicate directly or block each other.

How does Flutter work?

The rough equivalent of iOS’s UIView and Android’s View, in Flutter, is a Widget, which is somewhat different from the counterparts mentioned above. For starters, they have a different lifespan: they are immutable and only exist until they need to be changed. When that happens, Flutter’s framework will create a new set of widget instances. In comparison, views in iOS and Android are drawn once and only redrawn when setNeedsDisplay() and invalidate, respectively, are called.
Having such a reactive framework allows the developer to brush aside the need to get references to the widgets, facilitating the structure for all backend, with a single language.

About the project: Dwipper

As part of my learning experience, I worked with both frameworks to develop an application called Dwipper, where users post their shower-thoughts as Dwipps.

The app had the following screens:

• Basic login, registration and forgot password
• All Dwipps, to see everyone’s Dwipps
• My Dwipps, where you can see all Dwipps you posted
• New Dwipp, to write and post a Dwipp
• Change password, where the user can change their password
• Logout, where the user can logout

To me, this was a great learning experience. Flutter felt more intuitive, like how you work with widgets felt simpler than components in React Native. The only real issue we initially had was communicating with the app’s backend. It wasn’t something directly related to the framework itself, only a matter of figuring out what and how to send.

React Native, on the other hand, was slightly more troublesome, perhaps because I had no prior experience with JavaScript. The most frustrating part was working out how to set up the navigation between the login part and the “real” part of the app. Having to install a new component each time we needed something for a specific task wasn’t very pleasant.

Comparing with other frameworks

Flutter vs Ionic

As Ionic was initially released all the way back in 2013, it lags behind Flutter slightly. If the developer isn’t sound in JavaScript, CSS and HTML5, the ramp up time for proficiency will cost time and money in learning the framework, while Flutter has a smoother learning experience. Being able to hot reload for quick experimentation allows for faster development as well.

React Native vs Ionic

When we talk about React native vs Ionic, we can say that Ionic has great documentation and its tools are well understood by web developers. But since it’s built on top of a browser, the code can’t easily access native features.

React Native, on the other hand, has a big community backing it up, which leads to more issues or problems being solved by other developers online. React Native is translated into native code, being able to reach 60 frames per second easily, as if it’s a native app. However, it is backed by a big company, meaning that any new tools will only be released according to said company’s needs.

React Native vs Flutter: which one is better?

At the end of the day, when asking yourself which one is the best, Flutter or React Native, it all comes down to personal preference.

Someone with more knowledge and experience in JavaScript or React will most likely prefer to use React Native, since the transition is rather smooth.
On the other hand, a developer who enjoys the Object-Oriented paradigm will most likely prefer to use Flutter.

In case you need to build a mobile app more complex than Dwipper, you might consider using Flutter since it’s slightly more popular than React Native right now. That popularity might be of use when bug-hunting your app. More people means a wider variety of issues, which increases the probability of finding someone with the same problem as you or having it solved by another community member who already encountered it.

Found this article useful? You might like these ones too!

• 5 Common Errors Found in a React Native APP (Using EXPO)
• How To Configure Eslint And Prettier In React
• Angular Vs React: A Comparison Of Both Frameworks

Originally published at https://www.imaginarycloud.com on July 23, 2020.

It comes as no surprise to anyone that JavaScript is everywhere.
Here at Imaginary Cloud, the most part of the projects we are involved in, use it as the main language. My last project was a fairly large application that involved the usual culprits of the JavaScript ecosystem. We used a React front-end and a Node.js back-end stack.

Why do we use Redux?

When we needed to define a stack for this project, due to its nature of involving a lot of visual presentation and 3D modeling, React presented itself as a no brainer choice, regarding the front-end technology.

Unfortunately, at that time, a clear strategy for state management wasn’t defined. As the project evolved, it started becoming an issue, so the team decided to migrate all the logic related to state management to a Class that presented itself as a Singleton. That would help with all the state-related storage and events. This solution was fine on the short-term, but eventually, it would outgrow his usefulness and a plan was set in motion to find a better alternative. It came in the form of Redux, helped by the introduction of Redux Toolkit, previously known as Redux Starter Kit.

What is a Redux Store?

Redux is a state container for JavaScript applications that lets you circumvent the natural React unidirectional data flow. This is possible as it has a source of truth that you can consult in your entire application, without having to drill downstate as a prop to other components. However, it also allows you to alter using predefined actions, while also keeping a history of such actions and mutations, that can be consulted while testing.

Who created Redux?

When Facebook presented React to the world, it was already evident for them how props could become a major hurdle, when reaching a certain level of complexity. To mitigate this issue, they introduced a concept alongside React called Flux, which describes how a store should work in conjunction with React. Redux, as we know today, stems from just a proof of concept hacked by Dan Abramov, while tinkering with Flux principles for React Europe.

Where is Redux used?

Redux is used in large scale applications where an interaction with one component might propagate changes to the entire page. To facilitate this kind of communication between components, instead of having to create callbacks at the top level of the application, you can just consult the store. In my current project, Redux makes sense, because the application had escalated to a point where props related to its state were being passed down through several layers of components, which in turn was making the code hard to read and even harder to debug.

Dispatching Async Actions using Redux

Redux looked like a godsend when we started migrating old code to this new feature. It made the code look slicker, it was extremely intuitive to understand and reduced drastically the number of props floating around the application. But it was not perfect. The very nature of reducers poses a problem when you’re encompassing the fetching of information in them, and that’s something the Redux community has been tackling for a very long time.

How to handle Async Actions in Redux

Reducers, in theory, are pure functions, according to the documentation itself.

Given the same arguments, it should calculate the next state and return it. No surprises. No side effects. No API calls. No mutations. Just a calculation.

So, where should you apply async calls in Redux?
The Actions should be the immediate answer, but the basic implementation of actions is nothing more than a plain JavaScript object you use to pass information to your store. For this reason, the community came up with several middlewares that wrap all the logic into functions instead, which mimic the natural behavior of the store.

Which Async Redux Middleware should you pick?

As with everything in programming, there isn’t a one size fits all solution. So you should definitely research which middleware fits your problem the best. The first solution suggested by the documentation is Redux Thunk. This middleware allows you to create Actions as more than plain objects. These new Actions can dispatch other Actions, other Thunks and also perform async operations inside them. But recently, other middlewares have started gaining traction, like Redux-Saga and Redux-Observable have different use cases but they all share one thing, which is a very active repository and thriving community behind them.

Why Redux Thunk?

Out of all the popular solutions to this issue, Redux Thunk is the easiest one to understand. It’s also fairly accessible in technical terms and, at this time, it’s the suggested way to approach this situation according to the Redux documentation.

How to implement Redux Thunk?

We start here:
npx react-create-app my-app --template redux

This will get you a fresh new app using React with all the Redux modules we needed to do this short tutorial. We will also be working with the WoofBot API service.

The first thing to do is to set up a dog slice, where you’ll keep all the information related to your dog API response.

We have our Actions:

• uploadBreeds: Will be used as a dump of all the payload information regarding the dog breeds.
• uploadBreedImage: Will be used to uploading certain breeds specific images, if needed.
• loadingState: Will be used to updating the status of the request.

and Selectors:

• selectBreeds: Returns an array of all the breeds in store.
• selectBreedImage: Returns the image for a specific breed.
• isLoading: Returns the status of the request

How would you normally implement this back and forth with the API and the store? I would fit it all into a useEffect hook, similar to this one:

What are we doing here?

1. Component is mounted
2. Loading State is set to Request with one dispatch of an action
3. Data is requested using a simple fetch
4. Data is received from the API and processed to the object we want
5. Breed information in the slice is set to what we got using another dispatch
6. Loading State is set back to Waiting

Alternatively, we might receive an error from the API which will stop the flow in step 4 and set the Loading State to Error.

This works, and that’s ok. But it also has several downsides. Mainly, it puts too much logic in the component. It’s not reusable, and if you want to access this information somewhere else, you’ll always need to make sure this component is loaded first.

Now with Thunks:

npm install --save redux-thunk

The component logic looks like this:

We need to create a new fetchBreeds action that looks very similar to the logic we previously had in the component:

This simple change of location in the code fixes most of the issues we had previously. We’ve abstracted code from the component and we’ve made this specific piece of logic re-usable throughout the entire code base. This information isn’t bound to mounting the component anymore, so now you can issue a new fetchBreeds action and the data will be loaded.

This also enables us to chain Thunks in case need more complicated logic inside our actions. We can also access the state directly, instead of needing selectors. However, you’ll still want to use selectors to make sure that any changes to Redux don’t affect your Thunks.

In the end, what to pick to handle async operations in Redux?

Depends on the situation. In the same way you can’t use a spoon for everything, the solution has to be chosen based on the problem and not on the other way around.

In the most recent issues I’ve faced, Thunks was more than enough to satisfy all my edge cases. But maybe in your case, you’ll need a more specific solution.

Do your research, keep yourself updated and you’ll always have the best tool on your side.

Found this article useful? You might like these ones too!

• Demystifying React Hooks vs Redux
• Learn to configure ESLint and Prettier in React
• Angular vs React: which one to choose?

Originally published at https://www.imaginarycloud.com on July 16, 2020.

As the Lead Designer at Imaginary Cloud, I conduct most of the interviews for design positions. While interviewing a design candidate, I frequently ask about their preferred books on the subject of UI/UX or product design. Sadly often, they answer: Don’t Make Me Think or Design of Everyday Things.That’s the moment I know that my interlocutor knows very (very!) little about product design. Why is that? Well, don’t get me wrong. It is not that those books are bad. They were landmarks, in their time. In a time when there was very little acknowledgment about the importance and the role of design, when design was mainly done by developers and with very little user awareness. Those books were an important step forward. They laid down the first basic standards and foundational best practices. But this was around 20 years ago! 20 years! (And yes, these books were updated and re-edited, but their core remains pretty much the same).

If your main reference about design is a 20 year old book that is the first recommendation in any bibliographic list from the 1st year of university, you really need to renew your readings. That expresses how updated you are in the field, what references do you have, and what’s your knowledge level.

Why disregarding product design books is a mistake

Some designers seem to have a certain disregard for books based on “Oh, I’m busy actually DOING things. You know, I like to be hands-on, learn with practice rather than just knowing the theory”. This is a big mistake.

If you are simply going hands-on, you are disregarding the valuable knowledge that other people and the industry have to offer. That means that you will be wasting time and resources. Be it re-inventing the wheel or trying out new stuff, but without solid foundations, direction and strategy.

“Oh, but I prefer listening to podcasts. And I follow some blogs”. The thing is: a book can expand a topic in much more depth than any blog article or podcast will ever be able to do — at least if it is a good book. I agree that a few books (maybe the majority) consist solely of an overly extended repetition of the same ideas over dozens of pages. Those books could be summarized without much loss in a blog post or podcast. That’s why knowing the best books to read is so important. That takes me to the problem I have with the “book lists for product designers” out there.

The problem with most reading lists

There are a couple of well-known reading lists for UX/UI and product designers. However, they have a few flaws that I consider crucial. Being aware of those flaws is important, so you don’t take them as “the ultimate reading lists” and miss looking for alternative book recommendations. It also helps you start developing a better sense of which books are worth reading or not, so you are not restricted on what other people tell you you should read. So, what are those flaws?

Books that have more than 10 years.

Going back to the issue I pointed about Don’t Make Me Think and Design of Everyday Things, one of the flaws of most well-known reading-lists is how outdated they are. Even if the mentioned books are good, I guarantee you, in the last 5 or 2 years someone has written something that good or better. Old classics can be good to give awareness about the field’s historical evolution. However, it’s likely that they are outdated regarding society/technology/design patterns or to only present high-level good practices that are more or less atemporal.

The problem with the first case is self-explanatory. The issue with the second scenario is that general high-level practices can be found (with a more relevant context) in any good design framework or design system (for instance, Google and Apple design guidelines). Also, high-level guidelines provide very little value for experienced designers, who are already familiar with the basics. This brings me to the second common problem with reading lists.

Books that are too high-level

Most reading lists tend to focus on books about high-level practices or processes. Be it older classics or more recent books.

What do I mean by books that are only “high-level”? We can look at the example of the best-seller Sprint in a previous blog post that talks about how Sprint and our book Product Design Process are complementary.

Summing it up: Sprint describes how to include design in your product development. However, the book doesn’t tell you how to do the design. This is clearly illustrated when the book describes the part of making the visuals. Sprint mentions that “Makers” (Designers or Engineers) should create the individual components (screens, pages, pieces, and so on) following under the direction of “The Stitcher”, who should give them a style guide to follow. The book, however, doesn’t present the process to make a style guide. It doesn’t go into the work of “The Stitcher”. The same is verified in multiple other instances in the book, be it regarding visual work or UX work.

I believe the focus on high-level practices is due to two reasons:

1. The obsolescence issue already mentioned above. If you provide detailed UX or UI advices, you will become obsolete once a new technology gets trendy, or once an unexpected world event changes user behavior. In a time and field where things change so quickly, sticking to high-level principles makes your book (and your reading list) age better.
2. Most of those books are not targeted at designers, but at product owners and project managers. And that, in my opinion, is a problem itself.

Books that give product managers a light about design or that give designers a light about business.

Many books “about design” actually target product owners, project managers, or CEO’s. The end goal is to raise the awareness of non-design roles about the importance of investing in design. It’s a way for people to understand, at a management level, how to incorporate design in their processes, product-life-cycles, and alike. This is, I believe, the case of Sprint. Books like this are extremely needed, and I’m happy that people write them and advertise them. However, they should not be mentioned as books “for designers”.

However, there’s another book category: books for designers about business. These books provide designers a bigger picture of the environment they work in, and help to clarify how they can perform better when aligning the design work with business goals and stakeholders. This type of book is extremely important for a designer’s career evolution. Having a proper understanding of the stakeholders’ motivations and their business vision is crucial for a design’s success and a good client-designer relationship. With a lot of academic curriculums missing that, these books are a must read if you want to be a great design professional.

Increasing business awareness is, nevertheless, far from being the only thing important to bring a product design to the next level. There are other fields of knowledge (neuroscience, psychology, sociology, communication, etc) that can help you improve design skills, your creative process or “simply” to help you become a better person to work with.

The 4 most recent product design books you should be reading right now and why

As a passionate book-worm, I gathered here the most recent books you should read if you seek to push your product design skills and knowledge to the next level. In the books listed below, you will find rich insights from ethics, anthropology, neuroscience and history.

1) Ruined by Design: How Designers Destroyed the World, and What We Can Do to Fix It — by Mike Monteiro

Published in 2019, Ruined by Design is not a book about hard skills. It’s a book about moral, ethics, and collective union. It is the rant we all need to hear about designers’ political and social responsibility as counselors (instead of just “pixel pushers”). It’s also about the need for accountability and collective organization that comes up with it.

If you are a junior designer entering the professional field, Ruined by Design will help you getting better prepared to face the ethical challenges you will meet in the corporate world, and empower you to have the fights you need to fight. If you are a senior designer working on the field for years, this book gives you the context to re-examine your moral compass and actions, checking if you still have them aligned and to reflect on what you could do better. The tone of this book is angry and passionate, being that the author repeats himself quite often. I would say, however, that both the outrage and the repetition are needed to balance out the brain-wash that corporate environments can do. As the author puts it: “the goal of this book is to do the right thing in environments designed to make it easier to do the wrong thing “.

2) Mismatch: How inclusion shapes design — by Kate Holmes

Kate Holmes was the former Director of Inclusive Design at Microsoft who led the company’s development Inclusive Design Toolkit. Edited by the IMT press (first in 2018, and then in a new format in 2019), this book brings the question of “ what humans exactly are we putting at the center of human-centered design? “

Mismatch presents the concept of Inclusive Design, beyond the notions of accessibility and universal design (“one size fits all”). The book reveals the issue of current user-centered design approaches and uncovers the misconceptions that designers and product owners have about users. Then, it provides suggestions to incorporate Inclusive Design in your product design/development process — highlighting the pitfalls commonly seen when teams try to do Inclusive Design and provide useful insights on how to avoid them.

All these technicalities are carefully presented in the context of the historical, social, political, and emotional impact that exclusion has on humans — and the responsibility (and power) designers have on shaping this. Lastly, one of the richest aspects of the book is how it gathers knowledge from a myriad of other fields: school systems and children development, gaming, architecture, mathematics, air force, anthropology, etc.

Mismatch is, without doubt, an essential reading if you have (or want to have) any leadership role in a design project or team.

3) Captivology: The Science of Capturing Peoples’ Attention — by Ben Parr

In this book, you will find a collection of both scientific studies and business cases that provide an insight on how to capture users’ attention, but also how to sustain it. By reading it, you will get to know how the human brain works, understanding attention and memory mechanisms.

Captivology presents, in a complete but brief and accessible way, what science knows about attention and memory. Considering that the most part of designers lack training in cognitive science, this is an important reading so you can design in a more science-based approach. The book doesn’t present you with straight-forward tips directly translatable in design decisions, but I would say that it’s a plus in this case. On one side, the depth of the knowledge covered goes beyond the basic design principles, which allows you to understand the why’s of common design best-practices. On another side, the relatively universal and timeless nature of the scientific knowledge presented, paired with the absence of prescribed rules, will provide you with a great basis so you can dare to innovate beyond standard interaction patterns, without risking usability.

4) User friendly: How the hidden rules of design are changing the way we live, work and play — by Cliff Kuang and Robert Fabricant

The best way I find to describe User Friendly is as the Sapiens: A Brief History of Humankind for product design. The book presents the history of user-centered design from the beginnings of computer science to nowadays. Considered a successor to Design of Everyday Things, User Friendly figures in Amazon Best Books of 2019 Picks

What distinguishes User Friendly the most from other design books (including the other ones in this list) is its incredible good writing. The book is written in a narrative form with a very clean but somehow poetic style. That makes User Friendly feel much more like a leisure book than a book that you are reading to learn — even though, you will definitely be learning a lot by reading it. The book covers the major world events, people and technology artifacts that brought the user-friendly design to where it is now.

Our own book about product design: Product Design Process

I couldn’t finish this reading list without mentioning the book we wrote at Imaginary Cloud: Product Design Process: The manual for digital product design and project management. The book is great if you are well versed in the existing UX/UI tools (user interviews, focus groups, personas, jobs to be done, user journeys, mood boards, style guides, etc…), but if you struggle on how to move from one step of the design process to the next.

The Product Design Process book will help you select the essential UX/UI design tools, and present you with a straightforward design methodology (using the output of a step as the input of the following one). This will improve your efficiency in two main aspects: on one hand, it will allow you to create a seamless workflow, relying less on bursts of creativity. On the other hand, it will make design approvals easier by providing a clearer link between research data and design decisions.

Finding time to complement our work experience with valuable readings can make a huge impact on our performance as designers. So, which book are you going to read first?

Found this article useful? You might like these ones too!

• 7 UI trends you should be watching in 2020
• Google design Sprint Review
• Why cross-cultural design really matters

Originally published at https://www.imaginarycloud.com on July 2, 2020.