What steps should be taken to develop a Hybrid Mobile App concept?

We are currently developing our first hybrid mobile application with a monetizable idea in mind. After conducting some research, it seems that to reach our end goal we will need:

  1. A Front End UI Framework: options include Ionic or AngularGap (although documentation may be limited).

  2. To wrap the app using PhoneGap for multiple platforms.

  3. An appropriate BackEnd framework such as Loopback or Parse.

While I haven't delved into specific documentations yet, any experienced suggestions on the chosen path would be greatly appreciated.

Some questions I have at this stage:

A. Am I on the right track and how should I proceed?

B. Regarding Ionic being a UI framework, how do I integrate it with Phonegap to access native features? Would I need to use Angular to call Phonegap APIs?

C. Once the front end is established, how can I make backend API calls, particularly with Loopback - through REST calls or are there more efficient methods available?

Are there simpler approaches to accomplishing these goals?

javascriptangularjscordovaionic-frameworkloopbackjs

Answer №1

Over the past few months, I have been dedicated to developing a mobile app. During this time, I have experimented with various UI frameworks for hybrid app development, as well as different server-side and NoSQL database technologies. Below are some insights that I have gained from my experiences with these UI frameworks:

  • Sencha Touch - An early player in the hybrid app space, widely recognized for its cross-device support. However, it has a steep learning curve due to its unique framework rules. The bulkiness of the app, running all JavaScript to build HTML at runtime, may impact performance. Building the entire app in JS is not recommended when compared to HTML5.

  • jQueryMobile - Demonstrated poor performance on mobile devices.

  • BootStrap - Offers good UI but lacks in mobile performance. Initially developed without mobile compatibility in mind.

  • PhoneJS - Provides clean UI design but comes with a cost for non-open-source apps.

  • Chocolate-chip UI - Known for its lightweight nature and native appearance. However, lacks strong cross-device support and adoption rate. It shows promise and should improve over time given its backing by a reputable company.

  • Ionic Framework - A promising UI framework currently in alpha stage. While it shows potential, there are issues on Android platforms such as slider functionality problems. Development seems to be progressing rapidly, supported by recent investor funding. Once matured, it could become a top choice for app development, but for now, it's best used for prototyping rather than production apps.

  • LungoJS - Features a light-weight UI framework with smooth transitions and native feel. Offers good cross-phone support but struggles with tab functionalities. Maintenance levels are low as the developer is focused on creating a new framework.

For my own app, I decided to go with LungoJS initially and plan to transition to Ionic once it becomes more established with broader adoption.

All of these frameworks can be integrated with PhoneGap / Cordova for accessing native device APIs and packaging as mobile apps.

Regarding jQuery versus Angular, I would recommend Angular for better performance, especially in terms of UI transitions on mobile applications compared to jQuery implementations.

I hope this information proves helpful.

Gaurav

Answer №2

Exploring the realm of Ionic framework for my Android app project has been quite enlightening, yet somewhat frustrating due to the scarcity of thorough documentation.

My initial observations suggest that Ionic, when paired with Angular, seamlessly incorporates Cordova functionality. Gone are the days of separately creating a Cordova app; now, an Ionic app comes bundled with Cordova integration:

I initiated this process using Ionic CLI, leveraging ionic-angular-cordova-seed

On the backend front, Angular's $http and $resource modules handle AJAX requests effectively—in alignment with existing Angular practices. I would recommend delving into Angular's documentation for further clarity.

In summary: Envisioning Ionic as a refined powerhouse in the UI framework landscape is not far-fetched. With enhanced documentation and maturity, it stands poised to deliver unparalleled user experiences with stellar performance. Despite encountering some roadblocks, I remain committed to exploring its potential, given the absence of more compelling alternatives.

Answer №3

C. Is there a more efficient way than using REST calls to access backend APIs like Loopback while setting up the front end?

Nowadays, most backend-as-a-service solutions provide REST APIs. Both Parse and Loopback offer SDKs for JavaScript clients that simplify the process of making REST calls.

LoopBack

If you opt for LoopBack for your backend and AngularJS for your front-end, consider using the loopback-angular project. It can automatically generate $resource services for your Models and includes a Grunt plugin for convenience.

Take a look at the loopback-example-access-control app, which showcases the combination of LoopBack with AngularJS and Ionic.

Parse

Although I'm not very familiar with Parse, a quick search revealed these helpful links:

  • Parse Javascript Guide
  • Parse x AngularJS Boilerplate

Disclaimer: I am one of the developers working on LoopBack.

Answer №4

If you're on the lookout for creating a hybrid app using (phonegap + angularJS + backend), I highly suggest checking out Monaca. I recently stumbled upon it and was impressed by its integration of phonegap and its own backend system. The added bonus is its UI framework, OnsenUI, which is built on Topcoat and AngularJS.

Not only does Monaca offer native components for your app, but what really stands out is the convenience of not needing to constantly build and install your app onto your device during development. This streamlined process is definitely a major plus point.

I believe that this could be exactly what you are looking for - especially if you're just starting out like me. It's user-friendly and intuitive, making it ideal for novice developers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the value of a CSS property through JavaScript

Hey there, I'm wondering how to change a CSS value of the document itself, rather than targeting a specific element. I've already looked into solutions like Change :hover CSS properties with JavaScript, but they all involve adding CSS rules. I a ...

javascripthtmlcss

What is the best way to convert template interpolation using different words into a correct expression syntax in JavaScript regex?

I have a string that contains template interpolation along with words that are not inside the interpolation. The string can be in one of these various forms: foo{{bar}} {{foo}}bar foo{{bar}}baz {{foo}}{{bar}} foo {{foo}} {{foo}}bar{{baz}} The text interpo ...

javascript

Check for a rapid return if the function ends up returning null in JavaScript

Is there a way to make this code more concise? const result = getResult(); if (!result) { return; } // Work with result I have several instances of this code in my project and I'm looking for a simpler solution like: const result = getResult() ...

javascripttypescriptecmascript-6

Is it causing issues having the same version of jQuery included multiple times?

Within my HTML file, referred to as x.html, I've included other HTML files as well. In x.html, I have integrated the jquery library version 1.4.1. It seems that this same version of jquery is also being included from the other HTML files. Even though ...

javascriptjqueryhtml

In node.js, what is the syntax for invoking a function within a struct from that same function?

Here is a brief overview of my code: exports.entity = { name: "Foo", //Etc... start: function () { this.attack(); }, attack: function () { setTimeout(attack, 1000); //Doesn't work ...

javascriptnode.js

Amplify encounters the "Failed to load resource: the server responded with a status of 400" issue

I encountered an error while using Amplify, although the build was completed successfully. Failed to load resource: the server responded with a status of 400 manifest.json:1 The system is functional in the local environment. Below is the Package.json scri ...

javascriptreactjsamazon-web-servicesnpmaws-amplify

Browsing through a collection of JSON objects with a user interface

I need a way to filter and display a list of Dogs based on a search query. I initially stored the data in an array within the state, but with an increasing number of entries, I've decided to switch to JSON format for better management. However, I&apo ...

javascriptjsonreactjs

How to use JQuery UI sortable to automatically scroll to the bottom of the page

Having trouble with a few sortable tables and here is how I initialized the sortable object: var options = { helper: customHelper, handle: ".moveTargetDeliverables", containment: "#fieldset_deliverables_summary", tolerance: 'pointer&a ...

javascriptjqueryhtmlcssjquery-ui

The code encountered an error because it was unable to access the property 'style' of an undefined element on line 13 of the script

Why is it not recognizing styles and showing an error? All paths seem correct, styles and scripts are connected, but it's either not reading them at all (styles) or displaying an error. Here is the html, javascript, css code. How can this error be fix ...

javascripthtmlcss

Encountered a error 500 while attempting to POST using Postman in Node.js

After successfully setting up the server, I encountered an issue when attempting to create a user using Postman with the details in Application/JSON format. The server responded with: POST /sign-up 500. Initially, I tried specifying utf-8 without succes ...

javascriptnode.jsexpress

Ways to retrieve the length of the parent array within a component in AngularJS

Is there a way to access the value of a property in the parent from within a component? Parent: export class Animal{ animalID ?: Array<number>; { Child: import {Component, Input} from '@angular/core'; import {Animal} from '../anim ...

javascriptangularjsangular

Submitting a POST request using a Chrome Extension

I am in the process of developing a Chrome extension popup for logging into my server. The popup contains a simple form with fields for username, password, and a submit button. <form> <div class="form-group"> <label for="exampleInputE ...

javascriptajaxgoogle-chrome-extension

Customized selection groups for dropdown menu based on alphabetical order

I am dynamically generating a select list from an array of data and I want to group the options alphabetically. For example, here is the data: data = [ ['bcde','21254'], ['abcd','1234'], ['abcde',' ...

javascriptjqueryhtmlselectoptgroup

What is the solution to the error "modal is not defined" in Vue.js?

Hey guys, I need some help with an error that popped up: [Vue warn]: Error in v-on handler: "TypeError: $(...).modal is not a function". The issue is with the modal function Below is the code snippet from my welcome.blade.php: <body> &l ...

javascriptvue.jsbootstrap-modal

Using the Javascript jQuery post() or get() method to pass a JSON object within a closure function prior to

Looking for the optimal approach to managing a JSON object that needs to be posted/retrieved upon document readiness in order to execute another function that constructs the DOM based on said JSON object. This JSON object also undergoes updates every 30 se ...

javascriptjqueryjsonclosuresdom-events

Prevent tab switching from occurring by disabling click functionality on tabs

I've got different tabs set up in a similar way <md-tabs md-selected="selectedTab()"> <md-tab label="General"></md-tab> <md-tab label="Type"></md-tab> <md-tab label="Details"></md-tab> </md-tab ...

angularjs

Can you identify the issue with my database file?

Here is the content from my database.js file: const MongoClient = require('mongodb').MongoClient; const db = function(){ return MongoClient.connect('mongodb://localhost:27017/users', (err, database) => { if (err) return co ...

javascriptnode.jsmongodbexpress

Issue with Custom Directive: Receiving Token Error for Expression in Isolated Scope in Angular

(The following messages, code snippets, etc, have been slightly altered for clarification) The error message received is as follows: Syntax Error: Token 'promiseObject' is unexpected, expecting [:] at column 3 of the expression [{{promiseObject ...

javascriptangularjsangularjs-directive

Issues with executing Unit Tests in Karma using Webpack and Jasmine

Trying to set up testing with Karma, Jasmine, and Webpack in AngularJS has been quite a journey for me. While my webpack is functioning smoothly and I can run my website using npm start, things take a turn when I attempt to include my app.js. Despite nume ...

angularjskarma-jasminekarma-webpack

Unleashing the power of async/await in React: A comprehensive guide

Looking to simplify my code, I am interested in implementing async and await for the following code snippet. However, I am unsure of how to proceed. Any examples would be greatly appreciated. deletePost = (post) => { var post_id = post; try { ...

javascriptreactjs