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

Employing jQuery to redirect to a different URL when a button is clicked

I've been experimenting with a project that involves both JQuery and AJAX. One of the features I have added is JQuery autofill. Here is the code snippet for the form: <form class="form-horizontal"> <div class="form-group"> < ...

javascriptjqueryajax

Verify the existence of an HTML file prior to routing in AngularJS and NodeJS

Currently, I am facing a challenge in my NodeJS project that involves AngularJS for routing management. My issue lies in checking if a selected HTML file exists before routing to it. Despite trying numerous solutions, I have not been able to find one that ...

javascriptangularjsnode.js

This code snippet results in the property being unrecognized

I recently wrote this block of code and encountered an error while trying to run the alert function. It keeps telling me that 'this.words' is not defined. I suspect the issue lies within the jQuery portion, as I am able to access the array where ...

javascriptjqueryajaxoop

Using JavaScript for Text Processing on Disk

Currently, I have a set of HTML files that require automated processing such as regex replacements and more complex actions like copying specific text blocks from one file to another. I am considering creating a series of scripts to handle this processing ...

javascriptregexnode.js

Encountering build:web failure within npm script due to TypeScript

Our project is utilizing the expo-cli as a local dependency in order to execute build:web from an npm script without requiring the global installation of expo-cli. However, when we run npm run build:web, we encounter the following exception. To isolate th ...

javascripttypescriptreact-nativenpmexpo

Obtain the HTML of a Vue component and transmit it using an ajax POST request

I need to send an email with an HTML body using only ajax since I don't have access to the server code. Fortunately, the server has an API for sending emails. Currently, I have a dynamically rendered component called invoiceEmail. sendEmail () { ...

javascriptvue.js

Pressing the Button Increases the Counter, However the Counter Resets After

My goal is to create a basic counter with increment and reset buttons. When I click on the increment button, the counter properly goes from 0 to 1 (I can confirm this by checking the console log in Chrome). The issue arises when, after incrementing, the c ...

javascripthtmlbuttononclickincrement

When the width is reduced to a certain point, the display will change to inline-block, preserving the layout structure

My goal is to maintain a two-column layout for my container boxes, even when the browser width is minimized to 600px in my fiddle. The issue arises with the CSS rule display: inline-block causing the boxes to stack into a single column. Important point: I ...

javascriptjqueryhtmlcss

Definition of TypeScript type representing the value of a key within an object

As I delve into defining custom typings for a navigation library using TypeScript, one challenge that has me stumped is creating a navigate function. This function needs to take the Screen's name as the first argument and the Screen's properties ...

javascriptreactjstypescripttypesdefinitelytyped

Is it necessary to encode special characters in a JSON object?

I am currently working on a code where I am taking a class and converting it to JSON format. Throughout my testing, all the content is surrounded by double quotes, for example: { "a" : "hello world ! '' this is john's desk" } I am wonderi ...

javascriptjson

Having difficulty accessing information from a webservice on the Ionic1 framework

I am a beginner with the ionic1 framework and currently working on a sidemenu ionic app. My goal is to fetch a list of playlists from a Mysql Database. I attempted to do this in my controller.js : .controller('PlaylistsCtrl', function($scope,$ ...

phphtmlmysqlangularjsionic-framework

What is the method for developing a Typescript-connected High-Order React Component with Redux?

I am looking to develop a React Higher-Order Component that can safeguard routes within my application from unauthorized users without an access token. I aim to use this HOC to wrap a Component like so in the parent component: <Route exact path ...

javascriptreactjstypescriptreduxreact-router

Converting TypeScript to JavaScript: A Step-by-Step Guide

I have this code written in Typescript and I need to convert it to JavaScript const Home = (props) => { return ( <div> {props.name ? 'Hi ' + props.name : 'You are not logged in'} </div> ); }; How can I re ...

javascriptreactjstypescript

ReactJS: What is the best way to rearrange elements within an array stored in an object's property?

I am attempting to swap the positions of two elements within an array, which is nested inside an object as a property. However, when I click on the second "^" button in my CodeSandbox example below, I encounter the error message TypeError: arr.container.ma ...

javascriptreactjsarrays

All file upload requests consistently result in a status code of 400

I am encountering an issue with file uploading in Express. Every time I send a request with multipart/form-data, I receive a 400 bad request response with no error message, just an empty object. Currently, I am using busboy-body-parser for parsing multipar ...

javascriptexpressfile-uploadmultipartform-data

Setting a JavaScript value for a property in an MVC model

I am currently working on an asp.net mvc application and I am in the process of implementing image uploading functionality. Below is the code for the image upload function: $(document).ready(function () { TableDatatablesEditable.init(); ...

javascriptc#jqueryasp.net-mvcasp.net-mvc-4

Where is the best place for the heavy lifting in Redux - reducer, action, container, or presentation component?

I've been exploring the concept of container/presentational component separation as explained in this article. However, I find myself a bit confused about where certain parts of my code should be placed. Consider a simple list of items. When an item ...

javascriptreactjsredux

Issue with React's handleChange function in two separate components

I need assistance with calling the event handleChange from a second Component This is my principal component: const [mainState, setMainState] = useState({ stepValue: 1, saleDateVal: new Date(), customerVal: '' }); function moveNextStep() { ...

javascriptreactjsreact-hooks

What steps should I take to resolve the problem with accessing Mongodb?

Whenever I attempt to initialize MongoDb by typing 'mongo', I keep getting the error message "not recognized as an internal or external command". Despite setting the environment variables as recommended by many, as shown in this screenshot, I am ...

javascriptnode.jsmongodbcommand-prompt

Executing the callback function

I am facing a situation where I have a Modelmenu nested within the parent component. It is responsible for opening a modal window upon click. Additionally, there is a child component in the same parent component that also needs to trigger the opening of a ...

javascriptreactjsnext.jscallback