The week of the rabbit hole

It all begun with the remembering of having seen somewhere, a while a go, that it is fairly straightforward to turn a web page into a native app for iOS/Android. Curious I started looking into it and one thing led to another...

Mashup of https://www.pexels.com/photo/texture-grass-sport-ball-97768/ and https://www.pexels.com/photo/close-up-of-rabbit-on-field-247373/

The beginning

I quickly found Apache Cordova and Capacitor. They are both easy to use, but I found Capacitor to be preferable as you can add it to existing projects with ease. The downside with both, is that you will need the SDK for iOS and Android to finalize the builds. This is to be expected, but it would be nice not having to install all that additional stuff...

About 1 meter down

Searching around I found stuff like GoNative.io and Ionic Pro. Both are services that will build iOS/Android native apps in the cloud, pretty neat and free to use with some limitations. While definitely a suitable solution, I thought that half the fun would be lost with it being this easy. I came to think of VirtualBox...

About 2.5 meters down

I already use a VirtualBox for those few times I need to run Windows. Of course! Why not make virtual boxes for development? Then I don't have to clutter the computer with all that software, or run multiple computers, or reboot into different OSs! I installed, configured and got it all up and running after a few hours, super... All set to do native mobile apps! But...

About 5 meters down (at least)

In Capacitor there was a, sort of working, option to build using Electron. What's that? I did not know either at first, yet I have used software using it daily without knowing it... Electron allows you to make desktop apps for Windows, Linux and Mac using web tech. Discord for example uses this. Good thing I made those virtual boxes, as the far easiest solution when using Electron, is to be able to build on the correct platform directly! Capacitor's Electron is not quite production ready yet, so I looked into using Electron directly. This seemed fairly straightforward and is something I will investigate further next week. But while researching that... I found...

About 6 meters down, magic appears

Nativefier! Oh my... this tool allows you to input any web site url you like and it does some mojo and outcomes a working desktop app. I tested it with Reward Fireworks and it simply worked. The resulting output is not suitable for distribution but definitely suitable to use to craft an installer that will deliver it in a fancy manner. About here I had my curiosity hunger well fed. But...

About 10 meters down, probably should head back up a bit

That Capacitor thing was created by Ionic. They also create a framework for building native apps using the web. It looked interesting, I had to try it out a bit. Doing that I noticed it is built on AngualJS and I must say, I have yet to feel the urge to try out things that are heavy with that style of coding, same with React. But, with Ionic it was somewhat obfuscated and interesting, so I continued poking around with it for a while. This is when I found the final thing in the rabbit hole... which gave me the final purpose of all this and is what I have been doing the rest of the week.

https://www.pexels.com/photo/blur-clothes-pin-clothespins-equipment-246327/

5 meters back up

Ionic also creates Stencil. You use it to create reusable components, or rather you can use it for that, but also to build a web site or an app. Stencil is quite new and seems to be under heavy development. After looking at it for a while, I felt this would be a good starting point for all future projects. To use something that will, by usage, create re-usable stuff from the very get-go. The components are in that jsx/tsx type of style that you have in React, but with ever so slightly tweaks that, at least to me, feels a bit more like writing a regular script and not a scary markup/script medley. It was also very nicely packaged. Do "npm init stencil" to create a template project, follow up with a "npm start" and you have live compiling while running in a browser, allowing for quick development. This was all great! But...

2 meters to go!

When testing, not only did I have to go through the process of learning all the new things, there was also a constant stream of errors and issues that needed fixing. Adding a npm package would result in some error, not because the package was incorrect, but because Stencil had trouble compiling it. I managed to solve the issues as I went along, but all in all it seemed to not be ready for production use. I even had troubles getting a default template to build. A slight feeling of gaaaah! This is so close to being a perfect start for new projects, a way to have a nice Typescript setup with tsx files, fast development method, with easy setup and deployment. Then finally I realized...

Out of the whole with a bag filled with rabbit babies

My current setup is almost this. I only have to do some configuration and setup when I begin, but development is quite fast and it works in a similar manner. I've had issues getting Typescript to work flawlessly and have therefor avoided it. But... if I give it a last push and try from the very beginning to setup a new base project? I did and this is what I have been doing. I am not finished yet, but most of it is there.

I've found and configured the needed packages, I can use Typescript flawlessly and it live compiles for the browser. The browser update automatically and is linked to VSCode debugger. I've found Preact, that gives me tsx possibilities in a minimal and suitable manner. I've spent most of the time with Preact, as the world of components and tsx are new to me, but starting to get the hang of it. I've done some nice scripts for npm, so I too have that easy method of setting up my initial project, starting the live compile with file watch and doing the final build. Hopefully next week I'll have Electron and Cordova (or Capacitor) configured into the template project as well. I have it in a repository and will publish it to public when ready. Will it be of any use to others than me? No idea, but why not share cus you care!

If I only could remember why I ended up doing this.