React — Why Ionic lets you develop faster


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 ReactRecently 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 brainAs 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 BelowWhen 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 IonicUtilizing 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 neededIonic Application — Built for the Web and showing Mobile ViewSummaryThe 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.


. More details

Leave a Reply