I’ve been presenting on hybrid mobile development for almost five years now. As a web developer, I found the opportunities of hybrid development to be incredibly exciting. All of a sudden, I could take the tools I had been using for over a decade and deploy applications in the mobile space. Like others, I quickly discovered that developing good mobile applications required more skills, experience, and work, of course, but overall, I was excited about taking web standards and applying them to apps.
Generally, when I present on hybrid mobile development, whether it be Apache Cordova or Ionic, I begin by talking about the prerequisites. When it comes to “web knowledge”, I pretty much just leave it that. I assume that if you’re interested in learning about hybrid mobile development that you already have some experience with the web.
But that’s not necessarily the case. Recently, I was helping someone out with a Cordova issue and recommended that they “simply” use Ajax to load in some data. Turned out the person had no idea what Ajax was or even how to begin making use of it. This got me to thinking about what level of knowledge would be recommended for people looking to do hybrid mobile development (whether or not they use Ionic, but of course, they should use Ionic). What follows is a set of baseline skills that I’d consider to be required, or highly recommended, before beginning hybrid mobile development. Obviously, this will be a matter of opinion, and I highly encourage people to add to this list in the comments below.
I don’t know if one can say they have “learned” HTML when browsers have begun to innovate almost every month. I’ll say I began learning HTML back around ’93 or so. I can remember when bgcolor was added to the body tag (this was a “Big Deal” back then). I’ve got twenty plus years of HTML knowledge, and you know what? I still don’t know everything. A while ago I “discovered” the cite attribute of the blockquote tag. This wasn’t new, of course, but I hadn’t run into it before. So my point here is, even if you already know HTML, it may make sense to spend some time looking over the guides and just refreshing your skill set.
If you are starting from scratch, you’ll want to begin with the excellent Mozilla Developer Networks’ Introduction to HTML. If you know the basics, then check out the Mozilla Developer Network HTML reference to see if there are tags you don’t recognize.
All of this can be done in a day, but at a bare minimum, here are the parts of HTML I think will be most important to you.
- Forms: Since applications require interactivity, and forms create the basic mechanisms by which users interact with web pages, knowing how to build a form and create controls is essential. As for actually working with that data, we’ll get to that later on this in article.
I’ve had a love/hate relationship with CSS. While it is fun to laugh about being a developer with poor design skills, there is no excuse for not understanding how CSS works. Yes, you may not be able to determine what color goes with that. That’s obviously something a designer can help with. But you should understand how CSS works with HTML and how to specify layout properties to your elements.
The good news is that, once again, Mozilla Developer Network comes to the rescue: Introduction to CSS. As before, I’ll recommend the introduction I just linked to and their CSS reference for people who know the basics but want to review what’s possible.
So what’s the minimum?
- You should be able to add a style sheet to a HTML page. That’s relatively simple, but know how to do it.
- Understand how to set the color, size, and margins for items. Again, don’t necessarily be worried about knowing what’s “best” for these settings, but being able to do basic tweaks here will help until you get a real design in play. As an example, I’ll often use basic sizing attributes for a button on my mobile apps to make them easier to ‘hit’. My button may still be ugly, but I can at least use it more easily while testing.
- Understand CSS layout, specifically how CSS can be used to layout a web app. This one I still struggle with. Hell, I have to Google every time I want to center something. (Ok, I’ll admit it–I miss the <center> tag.) While I struggle with this area, I know it’s “possible”, and that at least gives me enough information to Google a solution.
Obviously, something like Ionic will help cover a lot of your design issues, and that’s good, but you really want to have basic CSS skills in your tool belt, anyway. As it stands, most clients are going to want a custom design, anyway, meaning that the “out of the box” Ionic look will only be acceptable during prototyping.
And much as I ended the HTML section above, I’ll also point out that CSS can be “interactive”, as well. When I began web development, I built a crap-ton of “roll over menus”–these were menus that would highlight as you moved your mouse over them. But now we have CSS properties that can do the same thing. And of course, there’s also a whole set of animations you can do with CSS.
Don’t be scared by this.
So what should you know before starting hybrid mobile development?
- Understand how to do Ajax requests. Again, jQuery hides some of the complexity here, but you should have a basic understanding of XHR (the technical bits of Ajax) and how to do network requests. As most hybrid mobile apps are single page apps, Ajax is the primary means of communication with servers and is crucial.
- This is the big one–understanding how to work with asynchronous calls. You absolutely must understand this concept. I think many of us more experienced folks forget just how plain weird this is at first. When learning a scripting language, you just naturally expect that x=foo() will just always work.
4. The Rest
OK, so you aren’t done yet. Here are a few more things I’d suggest.
- Know that browsers support debugging. If you write to me saying that “so and so isn’t working”, I always reply by asking what you saw in your browser’s developer tools. All modern browsers support developer tools, and they contain a huge amount of functionality. You don’t need to learn them completely on your first day, but know they exist, how to access them, and where to find the docs.
- While I linked to Mozilla Developer Network above, also consider CanIUse.com for a quick way to see if browser X supports feature Y.
- There’s a lot of different editors for working with web pages and hybrid mobile apps. The best one is the one you like the most. Don’t listen to anyone else’s opinion on this. Except mine. Use Visual Studio Code.