The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

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.

html_cat

1. HTML

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.
  • Structural tags: By this I mean things like div, ul, p, and others I’m probably forgetting. A lot of my JavaScript will interact with these items, either adding to or changing their contents, so understanding these ‘block’ style tags and how you can use them will be important.

One final point regarding HTML. Most people go into web development thinking “HTML for structure, CSS for design, JavaScript for interactivity”, and that’s mostly true, but not entirely. If you’ve ver used collapsible blocks in things like jQuery Mobile or jQuery UI, you may not know that HTML supports something similar with the details/summary tag pair. It’s an interactive set of tags that don’t require JavaScript at all. You can also do basic form validation all in HTML, too, without a lick of JavaScript. I think people who have been doing web development for a long time may forget this and not consider an HTML solution instead of JavaScript.

css_cat

2. CSS

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.
  • You should know how to use selectors to specify what parts of your app you’re modifying with CSS. This will also be helpful for your JavaScript skills, since you’ll often be doing selectors there, too.
  • 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.

js_cat

3. JavaScript

Ah, the “big one”. Most (but not all–see both the HTML and CSS section above) interactivity in a web app comes from JavaScript. Of the three main tiers of web development, JavaScript is perhaps the most complex and hardest to pick up. I’ve been using JavaScript since it was released, and frankly, I think I’ll need another ten years or so before I consider myself an expert.

Don’t be scared by this.

For most of us, we won’t be building huge complex apps like GMail. You can, and should, start with simple operations. As before, Mozilla is here to help us: JavaScript Guide.

So what should you know before starting hybrid mobile development?

  • Understand how JavaScript works with the DOM. Yes, jQuery makes this incredibly easy, but at least understand what jQuery is doing behind the scenes. You want to know how you can read and write the contents of a form field. You want to know how to change the contents of a div tag. When I began web development and was using JavaScript, this was the vast majority of what I did.
  • 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.

If you already know the basics, I’ll humbly recommend my article, Leveling Up Your JavaScript, which discusses how to go from “Beginner” to “Intermediate.” I felt this article needed to be written because many of the JavaScript things you’ll see online can be overly complex or not necessarily practical. I get that it’s cool to use JavaScripts to control robots. I get it. However, for a developer struggling to get stuff done, it isn’t necessarily helpful.

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.
  • http://www.badpenguin.org/ Antonio Gallo

    i think you forgot ColdFusion 😛 just kidding mate!

    • http://www.raymondcamdencom/ Raymond Camden

      What’s that? 😉

      • http://www.about.me/davidfrahm David Frahm

        ColdFusion is how you connect that Ajax to your Filemaker Pro database. C’mon Ray, get with it! 😛

        • http://www.badpenguin.org/ Antonio Gallo

          you won! 🙂

  • Corey

    A great humble post. I have loved following the Ionic platform for the last year or so. I have recently got into web development and am still learning the vast array of different languages and frameworks out there. I hit the Ionic Slack forums a few months back, not a newbie zone at all and I found it pretty hostile if you didn’t meet the high developer standard that many seemed to pertain to – it almost led to me walking away from Ionic. This post is a great reminder to all programmers that we all started out learning at some point and the path can be difficult. Todays newbs will be tomorrows customers for Ionic – when the paid business model is in motion – and we’ll the ones doing Ionic tutorials for the newbs. A great couple of vids from my fav Youtube programmer https://www.youtube.com/watch?v=f5TETbcYVcE https://www.youtube.com/watch?v=hha55d24NdI

  • eric_shinn

    I was with you all the way to the end… The only thing I would change is the Visual Studio Code (unless you’re cool with their agreements.) https://www.visualstudio.com/en-us/dn948229