React — Why Ionic lets you develop faster

Sketching/Designing your App could be important, but it doesn't have to be hard

Introduction

What many of us end up doing (including myself) is believing that there is only one road to success in programming. We convince ourselves that there can only be one correct way of building an application (and this seems to be mostly true for people just starting out with web/app development [aka Juniors]). The fact is, there is no right/wrong way to build your application. It either works, or it doesn’t work. If I’m your client and you deliver me a platform that works, do you think I’m going to ask you a ton of questions about all of the unit tests you wrote? Or ask you if you used the most effective schema for the backend? No. I want it to work. That is all (most) clients will care about.

Let me be very clear here that understanding the business model you are developing your application for is of great importance. I’m not going to build an application for a Fortune 500 company and slap some ugly code in there just to make a quick and dirty application. However, the vast majority of us create applications for much smaller audiences: family, friends, and even just ourselves (to solve a particular problem we encounter that might not be applicable to a massive audience).

Ionic Framework Meets React

Recently the Ionic Framework has released their beta library for React. The library allows you to quickly create a very nice (although some may argue that its an “overdone” design) application without the need to write a bunch of CSS/SCSS files.

For all of you designers and lovers of CSS/SCSS, you are extremely valuable. In no way does ANY framework replace you and I am not trying to make the argument that you are not needed. However, this article is focused on people that consider themselves primarily programmers and just dabble in design.

What you will get with your non-designer brain

As an example, here is a very rough mock of application that I quickly created using CSS (there also is underlying business logic but to what the function of the app actually is but we won’t get into that here):

Here’s just a code snippet for a very simple CSS grid:

body {
margin: 0px;
padding: 0px;
}
.wrapper {
display: grid;
height: 100vh;
grid-template-columns: 200px 1fr;
padding: 10px;
grid-template-rows: 120px minmax(200px, 1fr) 120px;
grid-template-areas:
"header header"
"sidebar content"
"sidebar input";
background-color: #fff;
color: #444;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
//Result Below
When you’re trying to quickly mock up css/html you get this…

It looks bad and is very uneasy on the eyes (and I’m not just talking about color palette here). It has some nice media queries for responsiveness and utilizes both grid and flexbox css properties. To create something as simple as what I displayed above you need to learn: basic CSS, flexbox, and grid. It will take you a while to learn these technologies if you don’t already know them and you will feel overwhelmed because as a “programmer” you will be saying to yourself “I just want this to functionally work…”.

What you will get if you use Ionic

Utilizing a framework like Ionic you can move that same application (with all of the business logic that you had) into a much neater looking page/app:

Coding with Ionic — No additional CSS needed
Ionic Application — Built for the Web and showing Mobile View

Summary

The Ionic Framework takes care of a lot of the CSS and responsiveness for you. Without it, you can still create stunning applications, but you will surely spend more time crafting your creation. To speed up the “design” part of your process learn more about the Ionic Framework by visiting the official Ionic Framework Documentation or for React users (like myself), read the article on how to get started with Ionic for React. A final note to why this article was written: Ionic has been around since 2013 but has been primarily associated with Angular until early 2019. The article serves the purpose of exposing Ionic to React users.

Michael Majdanski

Written by

Javascript Explorer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade