Best way to adapt vanilla site to deploy as webapp? [closed] - javascript

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I've been working on a "web app" which is actually a web site at the moment, completely vanilla, made with HTML, CSS and JavaScript; absolutely no external libraries or frameworks like JQuery, React or AngularJS.
My goal is to one day deploy the site as a webapp for mobile devices (iOS and Android), and desktops (Windows and Mac).
What is the best way to do this? What path should I follow?
Thanks in advance!
EDIT: I guess the site could be considered an app as it is SPA due to the use of JS and almost completely responsive thanks to media queries in CSS.
The main question here is: how do I get from a website app hosted on a remote server accessed via a domain, to an installable app for mobiles and desktops (.ipa, .apk, .exe, .app, etc)?

I suppose there are a few layers to this question. Let's start with some terms:
Responsive web page: A web page that works on multiple different screen resolutions (doesn't require anything more than CSS that uses media queries)
SPA: Single Page Application, this is how you get web "apps" rather than web pages. Tools like React and Angular help a lot with this, since you now need to manage things like state and routing (since you're not longer actually changing which page you are on).
PWA: Progressive Web App, this is the most modern type of web application, which tries to act very much like a native app by being capable of working without a internet connection and more.
A good way to get started down this path is to use React and their excellent tools Create React App https://reactjs.org/docs/create-a-new-react-app.html#create-react-app
This is a suite of tools that are already configured to create a SPA which is a PWA and with all the other modern tools you need to create a great web app. You'll need to read up on how to create Responsive web pages but there is plenty of resources for this, my tips are to start with media queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp as well as learning Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Related

Developing an hybrid mobile-application with google firebase [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 1 year ago.
Improve this question
community :)
I am currently planning to develop an mobile-application, using google firebase as my backend. The application must be hybrid, i. e. on IOS and Android.
What would you recommend, how would you start the app from scratch? Do any of you know a helpful tutorial?
Is it possible to develop 1 code base for IOS and Android together with firebase? Or, if I want to use firebase as a backend, do I have to decide whether I want to develop an app for android or an app for IOS.
Thanks for the answer(s) : - )
Cheers
David
You basically have two choices, you can go with a development platform which supports cross-platform, or you can maintain different code bases for both IOS and Android, by using their native development platforms. For the first choice there are a few options, React Native by Facebook and Flutter by Google are often preferred and well known cross platform development tools. If you wanna maintain different code bases for each platform, you have Android Studio for android which uses Java/Kotlin as its language, you can also go with python or C++ but they aren't famous and aren't usually preferred. Similarly apple has Xcode which uses Swift. If you wanna go with cross-platform support, React-Native only has a common UI component, the rest is still Java + Swift for individual platforms, but on the other hand Flutter compiles the code to its Native equivalent. It uses Dart, which comes from Java. Now all of these supports Firebase. If you wanna save some time, I'd recommend Flutter. It has a lot of components and makes cross-platform coding quiet easy. Cheers xD
Regarding your questions. Usually a HYBRID solution does not mean that it will work on ANDROID and IOS, but that the codebase is partially native and partially HTML based (Cordova, React Native, Ionic, others).
Regarding your questions:
If you want to start from scratch, first you need to pick your development tool. If you're aiming for a single codebase for Android and iOS, I would suggest you to look at:
Flutter (you'll code in DART. Project belongs to Google)
React Native (you'll code in HTML/JS/CSS. Project belongs to Facebook)
Mono/Xamarin (you'll code in C#. Project now belongs to Microsoft)
Ionic (you'll code in HTML/JS/CSS)
Kotlin Multiplatform (you'll code in Kotlin)
Yes. Totally possible. Firebase is only the backend. No matter what framework/language you pick you should be able to use Firebase as a backend.
Alternative is the native route:
Swift for iOS
Java/Kotlin for Android
Two codebases.

How Responsive Web Development is Different than Progressive Web Development? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
what is the difference between progressive and Responsive web app development?
check https://developers.google.com/web/progressive-web-apps?hl=en
Progressive Web Apps are many things, including responsive:
Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent - Enhanced with service workers to work offline or on low quality networks.
App-like - Feel like an app to the user with app-style interactions and navigation because it's built on the app shell model.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push notifications.
Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
Linkable - Easily share via URL and not require complex installation.
https://developers.google.com/web/progressive-web-apps?hl=en#learnmore

With HTML5, JavaScript and AJAX, are PHP, ASP.NET and J2EE backends still required? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to catch up with modern Web application design approaches. With the latest technologies, is it still appropriate or necessary to tie a web application to a specific backend language like PHP, ASP.NET or J2EE?
I've been thinking of HTML5, JavaScript and asynchronous queries. An application could potentially consist of a series of simple, empty HTML document templates where the data components are filled in after the page load event using JQuery/XMLHttpRequest calls to a web service.
In this context, the backend web service could be implemented using any arbitrary framework and the serving of HTML pages could be handle by any web server. The application's web component would then be purely HTML5 and JavaScript with all other business logic hidden behind a web service interface.
But is this an effective design for complex applications which rely on session management and page transitions? Does anyone code this way or are traditional backend languages always used to generate the HTML documents?
Thanks.
Interesting question, I view it as this way. HTML5 is no longer HTML5.. but "HTML". We'll never see an HTML6, the new HTML5 model will continue to be improved upon and have features added to it. Some day, the days of needing third party plugins for video, audio and drawing, all devices will share the same front end presentation model.
When you think of it, frameworks like PHP just make dynamic HTML, and marry business logic with presentation logic. For the forseeable future, couldn't we always have a need for something like that? That being said, I can certainly see numerous applications in the future that leverage open data and rich client side controls. I don't think this threatens the extinction of ASP.NET, PHP or J2EE.. I think it enhances them, as now we all have a more fuller toolbox to develop with.
Scott Hanselman gave an awesome presentation 2 years ago at Microsoft's Build conference (http://channel9.msdn.com/Events/Build/2012/3-027), it's a great discussion on how JavaScript makes the web browser an incredible emulator, and that you can now front load logic and programming onto the end user... similar to what you are thinking. In the end, I think options like this just allow us to make sure that we use the tools for the appropriate reasons, just like in the ASP.NET world we now have Web Forms and MVC.. Web Forms aren't dead, they're just not the only game in town anymore, but now we can use Web Forms when appropriate, and MVC when appropriate.
Great question!

JavaScript Mobile Applications Abilities [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
anyone knows what are the abilities of HTML-CSS-JavaScript mobile applications (android apps) rather than animations ? what about web access and such things ?
Javascript is being very powerful language especially when we are taking about mobile applications and spa (single page applications). It can be used to load web views via ajax requests and more, it supports device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript libraries , for example cordova . Cordova is the most known library that gives you that power.
In addition to that you can use libraries to make your application look like mobile native apps and enrich your application with functionalities (form validation , navigation, and more), examples : sencha or jquery mobile .....

QuickConnect vs Phonegap [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
What JavaScript Mobile development tool would you use based on momentum, existing documentation and functionality, and ability to get passed the App Stores strict policies?
Current PhoneGap release (0.8.0) released 2009-10-13 is tagged "Apple approved for App Store submissions". This blog post has more details.
I used PhoneGap to port a JavaScript game and I loved it. Unfortunately, the game was too slow (Mobile Safari is slow when you make changes to the DOM, and I was moving divs around as sprites) and I switched to native.
But since some people started getting having their PhoneGap apps rejected, I have become shy of the project. I'd love to hear an official stance from Apple, but I don't know if it'll ever come.
I found Phonegap to be the easiest to use. However Quickconnect seems to be more ambitious in terms of multi-platform support, the author tells me that Quickconnect has been used in many apps (but couldn't disclose which). Supposedly Phonegap apps were being rejected because those submitting were loading the entire apps off the web, however the framework does seem sluggish. Apple has not replied to the Phonegap team about the app rejection.
If I had to make a choice it would be Phonegap at this stage, but unless you really want the app on multiple platforms I don't see why you wouldn't use the great tools provided by Apple for native development.
At this point you might also want to look at Titanium by Appcelerator.
The development process is pretty simple, and they support both the iPhone and Android platforms.

Categories