We strive to grow professionally at gap intelligence. As a developer, we have two in-house paths to grow our skill sets: Dev Days and our professional development budget (which gap intelligence offers to every gapper). Before I dive into my blog, let me give you a bit of background about myself. First and foremost, I’m a Rails Developer. No, this is NOT the only language I code in, but its definitely prominent in my life as gap intelligence is essentially a Rails shop and I claim that Ruby on Rails saved my career. You can read all about it here.

One of the skillsets I’ve been very interested in learning for some time, is how to develop mobile applications. I’m a huge fan of mobile apps and their convenience. Having that power at your finger tips is great. So with that I created a goal in gap intelligence’s awesome High Five internal tool. Recently a fellow gapper, Chris Childers, blogged about the importance of goals and how we use our High Five tool to track them (check it out).

So the question now was…where would I start? The first thing I decided was that, under no circumstances, would I torture myself into having to learn how to code in objective-C…NO THANKS! Remember, I’m a Ruby on Rails developer, which they say is optimized for developer happiness. Having to write Objective-C is most likely NOT going to make me a happy coder. Instead of trying to learn an old language, I opted to try its successor: Swift. It’s a much more modern solution and it’s developed by Apple, so not a bad place to start.

Swift Logo surrounded my mobile phones and other mobile icons

sdtimes.com

What is Swift?

According to Apple, “Swift is a powerful and intuitive programming language for macOS, iOS, watchOS, tvOS and beyond. Writing Swift code is interactive and fun, the syntax is concise yet expressive, and Swift includes modern features developers love. Swift code is safe by design, yet also produces software that runs lightning-fast.” Let me start by saying that my experience with Swift, although very limited, was NOT fun! From the get-go, I disliked that I had to use Xcode, which is what the majority of the Swift development world uses as its IDE. There are a few other IDEs that you can choose, but I figured I’d get better support and more hits on stack overflow if I went with the majority here. Xcode can be a very intimidating tool to use, especially if you come from coding in simple text editors, like we do in Rails every day! It’s simply just too complicated to navigate around this monolithic IDE. The one thing I did happen to like were the Xcode playgrounds. This allowed me to get familiar with the language syntax pretty quickly.

The tutorial I took was actually pretty cool, Coding With Chris. I felt the instructor explained things well and in the end I created a War Card Game application. This course has changed quite a bit from when I took it and is now a series of YouTube tutorials. Check it out if you are serious about Swift development.

Despite all of the great advantages of programming in Swift, I was not sold on this being the ideal choice for me. Picking Swift would mean I’d ONLY be supporting iOS. So after some research I ran into a concept called Hybrid Mobile Development.

What is Hybrid Mobile Development?

Hybrid app frameworks provide a way to develop mobile apps using known languages like JavaScript, HTML and CSS. A Hybrid framework is a tool that allows developers to use a single code base and release to multiple platforms, like iOS, Android, and even Windows. If you want to create native iOS and Android apps, you are forced to use their respective proprietary platforms (Java for Android or Swift/Objective-C for iOS); meaning you might have separate teams with unique skillsets to develop and maintain separate code bases with the same exact functionality, which can be very expensive.

There are a few popular frameworks out there such as React Native, PhoneGap, and Ionic (spoiler…more on that later) that allow for this “write an app once and run it anywhere” approach. After some research, the option that stood out to me was React Native. I already had some exposure to React with gap intelligence’s Dashboard tool, so I felt React Native would be my next attempt at finding mobile happiness (and if you are curious, CEO Gary Peterson blogged about our Dashboard platform).

Mobile phone with the react native logo.

richestsoft.com

What is React Native?

React Native is an open source, cross platform, mobile application framework created by Facebook. It lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components. They say you can build mobile apps that are indistinguishable from the apps developed using Swift or Objective-C.

After creating my goal in High Five to learn React Native, I began the search for a good tutorial. I found a highly rated course on Udemy.com called “The Complete React Native and Redux Course”. It took me a handful of Dev Days and free time to complete, but I would say it was way worth the time invested.

Coming from an MVC background, coding in React is definitely different. It’s essentially JUST the “V” in an MVC architecture. As its a component-based architecture, it can be challenging to learn. However by the end of the tutorial, you gain an appreciation for the code reuse aspect. As you start new projects, you re-use components built in previous projects and can end up with an awesome component library. In the end this will help you create apps faster in this eco system. Another awesome thing about the components you build , is how they magically change. This is where React Native shines in my opinion. In a traditional JavaScript app, you need inspect what data has changed and make changes to the DOM to keep it up-to-date. React takes a different approach. When your component is initialized, the render method is called and generates a default representation of your view. When your data changes, the render method is called again. The developer doesn’t need to explicitly specify data bindings…it basically works this way out of the box.

Here are some other things I liked about coding in React Native:

  • Uses a simple text editor
  • One codebase, multiple platforms!
  • Component reusability
  • Live and hot reloading functionality
  • Massive support from the development community

Overall, I would say React Native is a solid choice if you want to go the hybrid/cross platform route. Its a very popular framework backed by a big time company! However, my research for mobile happiness did not stop here. I then stumbled across, yet another Hybrid platform, called Ionic.

Mobile phone with the Ionic logo next to it with some blurbs.

quape.com

What is Ionic?

According to their website, Ionic is “The dev-friendly app platform for building cross-platform apps with one codebase, for any device, with the web.” Basically, Ionic makes it easy to build high-performance mobile apps that look and feel beautiful on any platform or device.

For learning Ionic, I chose another Udemy.com course called “Ionic Basics”. The course was great and I believe I found my mobile happiness. Although I was only exposed to the basics in this course, I can definitely see myself continuing to develop in Ionic. The thing I liked right off the bat is the low entrance barrier into learning Ionic. You are using skillsets you already know: HTML, CSS, and JS. You really only need to become more familiar with JavaScript. Out of the box, Ionic uses a very popular JS framework called Angular. Also with Ionic 4, you can now plug in other JS backends, like React or Vue for example.

The ionic framework comes with a nice library of front-end building blocks and UI components making it super easy to make UI screens. The components look really nice in their “default skin” as a Fortniter might say (my kids play that game religiously). My CSS skills definitely lack, so the ability to make nice looking screens with little effort is HUGE for me. Another huge benefit is that its super easy to debug. You can just run the app on your local browser and take advantage of the chrome developer tools.

Below is the Weather app I created in the tutorial. As you can see, I even published it to the Google Play Store.

Screen shot of the weather app created using Ionic published to the Google Play Store

Here are some more reasons to love Ionic:

  • Open Source
  • Easy to learn
  • Simple IDE Editor
  • Active community
  • Ionic framework uses Apache Cordova as its bridge that gives access to the device’s hardware (contacts, geolocation, camera, etc.)
  • Automated Reloading
  • Developer-friendly Framework
  • Faster Time-to-market

Wrap Up

React Native vs Ionic image

railsware.com

For me, the pursuit of mobile happiness will stop here. This doesn’t mean Ionic is the BEST choice for your mobile development, but it suits me well. React Native was a close second for me in regards to platforms I would choose to build mobile apps. Hyrbid development definitely won me over as the approach I want to take. Unfortunately, true native development just isn’t in the cards for me.

The biggest thing for me in this journey was that I wanted to find a platform that was enjoyable to create mobile apps with. You can’t put a price on loving what you do, so when choosing a new tool, framework or language to use, I hope you will not ignore developer happiness in your decision making. For now, Ionic is my happy place for making apps.

For more than 16 years, gap intelligence has served manufacturers and sellers by providing world-class services monitoring, reporting, and analyzing the 4Ps: prices, promotions, placements, and products. Email us at info@gapintelligence.com or call us at 619-574-1100 to learn more.