I am working on 2 identical GUI: 1 for mobile (using Ionic), 1 for non-mobile. The non-mobile interface is responsive so it's already mobile-ready! So, 99% of the code is the same.
I develop the mobile part of the GUI in Ionic Framework (Angular). The non-mobile interface is using Angular only. I could simply merge the non-mobile site (Angular only) into the Ionic project. Then, I would only have ONE branch to maintain.
Knowing that we can use the command "ionic serve" to expose the Ionic Interface in the non-mobile browser, I am thinking to simply use the command "ionic serve" on the production server to expose the web interface of the ionic to non-mobile users. Is it a good practice? If not, what should I do to have 1 branch only?
Doing ionic serve is creating a webserver on your folder www
This will not perform many very usefull operation for production such as :
minification / offuscation
clearing comments
sass build etc...
Those tasks are for example triggered by grunt / gulp tasks or hooks into ionic build command if your properly configure it.
Therefore, I'd recommand you the two possibilities :
cordova platform add browser
This is the one I prefer, as you can take good advange of cordova hooks steps and use the same hooks for mobile & non mobile.
Copy your www folder and make your own build process
In both case, you'll have to perform some tests as ionic is developped and optimized for Android & iOS, which is not all mobiles (ex: windows phones ) and not browsers.
I remember on one project adding some spec class for browser and detecting if user uses browser or not for specific behaviours.
Related
I wonder if it is possible to use chromium engine inside google chrome or the google chrome itself to render a web page inside my WPF application instead of using traditional WebView (because it's the IE engine and it's awful -_-) or implementing CEFSharp (because it uses about 200 MB of space only for the chromium engine)
so in this case I need the target pc to has installed google chrome or any other(firefox or ...)
Soooo ... is there any solution?
thanks in advance
EDIT
I want to create applications based on web UI, - because of being easy and powerful - I know some providing this feature, e.g. CEF Sharp WPF or electron js but they include a full chromium engine with the app. I don't want this.
I want to create my app as light as possible, and my idea is to use chromium engine of a modern browser, that almost everyone has one.
For example, imagine that the user has installed google chrome.
first I locate the installation folder
I use chromium.exe -render path/to/file.html(imaginary) command to render my application UI.
finally bind the UI events to my native code. (e.g. c#(wpf) or any language that you can create desktop apps with it)
One solution is creating web apps by installing a website with the browser. but with that you cannot for example create or read some files in user pc, or any similar operation.
I'm looking for the most light-weight solution...
There is a new Chromium based WebView2 control that you can use to embed modern web content in your WPF application.
Please refer to the docs for more information about the prerequisites and how to use it:
Getting started with WebView2 in WPF
Explanation
So, let's say that you want your UI to be rendered in a chromium environment(aka a browser)… right?
let's take a look at electron js:
it uses NodeJS as backend.
it uses an embedded browser for frontend.
the language used is JavaScript due to NodeJS.
So, you want to use the client's browser to render your frontend instead of embedding a browser inside it.
well, don't embed it!!
you can create a web application(e.g. opened by typing localhost:<port> in browser1) using NodeJS and handle your IPC(between frontend and backend) using ajax calls or a socket connection.
that way you are doing exactly what an electron app does, except that, electron uses a bundled browser.
now you made your app lighter, also if your client do have NodeJS installed, you don't need to bundle NodeJS!
--- inspired by jupyter notebooks ---
Possible Solutions
use NodeJS as backend.
use python and combine it with Flask or Django as backend. (I think this would be the most lightweight solution)
use PHP as backend. (the best, personal opinion)
use ASP.NET/Blazor as backend. (as mentioned in the comments; but doesn't seem to be a lightweight solution)
or use any language that you can create a web application with that!
make a runApp.bat or runApp.sh to simply run your server and open the browser automatically.
I do not know much about web tech and currently, I am planning my own project implementing web app + hybrid mobile app.
Based on my research, it seems many people use bootstrap, on the other hand for mobile, ionic seems one of the most popular ones.
web: bootstrap +
mobile: ionic
While planning it, I met an issue, i.e. how I can combine bootstrap source with ionic and its difficulty, and would it take many steps to modify code and apply for both sides.
So my question is
1. is it easy to combine bootstrap to ionic?
2. Is there widely used tool that is integrated for web and mobile application development?
Thanks in advance.
Bootstrap is meant to be a CSS library for creating responsive web, be it webapp or mobile. You can easily create a webapp using AngularJS as you mention, and let its responsiveness be driven by Bootstrap.
Ionic 1 is meant to be a mobile app development framework, not mobile web. It has got a lot more than just CSS styles; it creates hybrid native apps for Android, Apple and Windows platforms. Though it does just run fine on mobile screens as a webapp.
Ionic 2 has support for webapps so you can easily write your mobile app that can then be deployed either as a native app or on a web server.
Though on both versions of Ionic, you may choose to use Bootstrap for styling your elements but be aware that this won't replace Ionic's own scss. And it might create some unforeseen issues as you've pointed out.
Bootstrap is primarily for webapps running in browsers.
Ionic is targeted to run the applications in a webview using cordova. So, it contains many platform specific stylesheets, properties etc.
1. is it easy to combine bootstrap to ionic?
There is no point of combining both, as IONIC is providing everything you need from bootstrap. ( Element Stylesheets, Common Functions etc ).
2. Is there widely used tool that is integrated for web and mobile application development?
Angular JS is going to help here. You can reuse most of the angular code is both have the same functionality.
For IONIC 1 : You need Angular 1 and IONIC 2 is based on Angular 2.
I needed some inputs on mobile apps.
Query: I have an existing web application on AEM(angularJS is not used). I want to transform the same on Mobile app using AEM6.1
While reading through the documentation section of AEM Apps, I found that the mobile App built on AEM
- works on the terminology and AngularJS framework.
- mobile App has different paths and app structure as compared to AEM web Applications
-since, phonegap has to be used, relative path needs to be different than the same of web application.
I am in a dilemma as If I would be able to convert my existing web app into a mobile App or not. If anyone of you has done some research on this, it would be very helpful.
Thanks in advance!!!
Regards
You can very well convert your AEM desktop application to a mobile app(site should be responsive).
AEM makes use of Cordova (PhoneGap) and ContentSync framework to create apps for both android and iOS. More about how to config ContentSync here. In simple terms, ContentSync packages your application(/content, /apps, /etc,...) based on defined set of configurations and cordova(phonegap) helps you access native phone capabilities and to create the archive file (apk/ipa). There is more than one way to create an app using AEM.
1. Using Cordova CLI :
You setup a cordova project in your filesystem. Then create contentsync configuration for your AEM project. Generate and download the application archive from here. Cordova project you had setup earlier will have the below folder structure.
Place the contents of archive file inside www folder, modify config.xml according your application and initiate build. Using this method, you will require an Apple system to generate .ipa file since it makes use of xcode and windows makes use of npm node js for the initial dev env setup.
2. Using OOTB 'Initiate phonegap build' workflow and AEM cloud config
This is an easy approach and does not require you to setup any cordova project in your system. All you have to do is setup contentsync configuration, add a few properties for the workflow to recognise your project and then trigger the workflow. Follow this.
3. Using Apps console in AEM 6.1
This also makes use of ContentSync underneath. Apps console makes the app very easy to maintain and configure, it also has inbuilt configurations for push notification, deep linking etc. Go through the info here. Refer to the sample geometrixx-outdoors project created in apps console, will help you understand better.
PS: Cordova and phonegap are the same. You can think of Cordova as Linux kernel and PhoneGap as linux distribution.
I want to use Ionic Framework for my mobile website.
I wonder that is there any risk for run Ionic Framework on mobile browsers.
I'll only use framework's CSS and JS which includes modals, popups, menus etc.
I built a prototype and I tested it on all versions of iPhone and 2-3 versions of Samsung. I haven't seen any problem on these devices. But I want to learn all risks before I start to real project which includes static pages and quotation steps. I'll use UI router by using HTML5 pushstate.
To learn your opinions, makes me more confident.
Thanks in advance.
Kindest...
There are certain caveats to this:
1. Ionic doesn't have a web server, and its testing server uses UIWebview and will not allow for POST requests.
2. Ionic is more optimized for app that is resident on the device. There are certain capabilities (ngCordova plugins for camera...etc.) that won't be available on mobile web.
Your scenario ("framework's CSS and JS which includes modals, popups, menus etc.") - should be fine, since you're only using functionality within Webview. You'd have to build a custom JS library that would only include presentation layer features.
Phonegap
allows access to native features, camera, address book, etc.
has no built-in UI elements, something else is needed for that (JQM for example)
(anything else?)
Phonegap build
allows cross-compiling of an app, it could be sencha, phonegap, etc.
Sencha Touch 2
has UI elements that display natively on each OS
has its own build that allows cross-compiling
can be supplemented with phonegap if access to native features if required?
Is all of this information correct? If not please clarify.
Phonegap (Cordova) essentially generates an app that uses a web browser internally to run a webapp. The webapp that it runs can be made however you wish to make it, with any number of frameworks.
Sencha Touch is just one of those frameworks that can be used. ST can also, however, be used to generate the native apps, but it will not allow as much access to native functionality as packaging your ST app into a Cordova app.
FWIW, it was made public last week that the new version of ST (2.3) will have easier integration with Cordova, allowing a Cordova build using the Sencha Cmd tool.