Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Choosing a Framework

Hello everyone, this is Reggie Dawson. Welcome to the Building an App with Cordova course for Tuts+. In this video, we are going to learn about the various frameworks we can use for our apps. In the last video, I mentioned that Cordova is designed to allow you to access your device's hardware, and no front-end components are included to design your app. As a result, you have to make a decision regarding the front-end of your app. We can undertake the process of designing all of our UI components from scratch, or we can start with the framework and customize it to our liking. Surprisingly, there are lot of options when it comes to the framework we can use with our app. I will briefly go over some of these frameworks and highlight the pros and cons of choosing a framework. First, let's eliminate the Ionic and Intel XDK frameworks. Both of these frameworks build their apps on top of Cordova, but they have both integrated their own workflow. They are both great frameworks, but they are outside the scope of this course. If you are interested in those frameworks, I have included links to courses about them. The first option for our front-end framework is using regular web-based frameworks such as Bootstrap or Foundation. Both of these frameworks include all of the front-end components you will need to design the UI of your app. Also, since these frameworks are built in pure HTML, CSS, and JavaScript, you can be sure that they will work with Cordova. The main drawback of using a framework like these is that there is no built-in support for mobile interactions such as swiping or pulling to refresh. Even though Bootstrap or Foundation will work, we will lose a lot of the common interactions that we are able to use on a mobile device. The next options are frameworks designed for mobile use such as Ratchet or Topcoat. Ratchet is a set of UI components designed for mobile. It comes as just HTML, CSS and JavaScript files, so incorporating into your project is simple. Ratchet includes a bunch of UI components, including the always useful icon set. Additionally, Ratchet has separate themes for a base look as well as for Android and iOS-style apps. In this way, the look of your app will stay consistent with the platform it's deployed to. Now Topcoat is designed for speed, it's fully themeable, and comes with a variety of components. Again, a simple download and easy to incorporate into your project, this is a possibility for your app if you are looking for good performance. These frameworks, while useful, are again missing the interactions that are unique to a mobile device. Although they look the part, apps built with these frameworks will not behave like a mobile app. We could incorporate a third-party library, but we really want to use a single solution. And that brings us to our final choices for frameworks. Frameworks like jQuery Mobile, Framework 7 and Onsen UI provide a solution that will meet all of our needs to build a mobile app with Cordova. jQuery Mobile is a set of UI components built on top of the popular jQuery JavaScript library. It comes with the same ease of use as jQuery and supports mobile interactions. With full support for themes and combined with jQuery, it has everything we need to build our apps. As a matter of fact, it is the framework we're going to build our app with. Framework7 is a framework that also comes with everything we need to build an app. This framework has its own custom DOM library and many features to make your app behave like a native app. Primarily focused on iOS development, this framework also includes a material theme for using your Android apps. And lastly, Onsen UI which offers multiple components, mobile interactions, and simple integration. Most importantly is that Onsen UI is built on top of AngularJS. For an app we're going to be building, we are going to be interacting with Cordova plugins. If we were going to be grabbing data from remote sites, I would have used Onsen for its Angular capabilities. Since we're using plugins, jQuery will be enough. These last three frameworks have everything we will need to build our entire app without using another framework, although technically jQuery Mobile is going to be using jQuery. Either way, jQuery Mobile is what we are going to be using to build our entire app. That's everything you need to know about choosing a framework and what you need to consider before you choose one. What your app needs to do will help decide what framework you will choose. In the next video we will install Cordova.

Back to the top