Phonegap apps are usually different from general web sites, even if they are written with the same language.
Main differences:
a Phonegap app loads main pages from local file
many web frameworks for mobiles (like jQuery Mobile) usually load a single html file and then programmatically change pages.
So I think it's outdated the common suggestion of put code on external JS file. Is it true?
What's the best way to organize the code so it will be fast to load and easily maintainable? (e.g. do you separate code that concerns the view and code that concerns the data?)
Even with jQueryMobile I have many html files. Sometimes we're loading a portion of content from another html file using the jQueryMobile mechanism of loading just a particular #id from the html file. In many apps the data is being loaded from an external site and being inserted into the content from the local files. If I do load any data locally I use a data subfolder unless I'm loading from local storage.
Given that, here is my typical structure of my www folder:
www (all my views go in this main folder)
data (any local files that will be loaded for insertion into my views)
js (all my phonegap plugins and jquery source goes here)
styles (css for jquery, local views, etc)
images (local images for my views
Phonegap apps are generally web-apps using advanced integration points. The content is still rendered in a WebView which is not very different from system browser...
There is no standard on organizing the code of your application but most advices for web-apps are a good fit for Phonegap apps too...
Related
Next JS by default generates a static version of the website after building it the first time and then serves it when the user requests it. Wouldn't that be opposite of what ReactJS does (Where React JS uses JS to generate the website at the client's end.) and basically would be same as using vanilla HTML/CSS/JS?
Also, Where does Next JS stores the statically generated website? (Is it at the server where the website is hosted or somewhere else?)
Good question!
yes, it sounds a little counter-intuitive, so NextJS actually generates HTML markdown from react components, but the idea is to make it faster in the first-page load, but after that, the app will end up sending the rest of the javascript like a normal ReactJS app.
The objective of this is to respond to HTML always (so google and other SEO tools can "understand" your page without loading extra assets).
That HTML travels in the HTTP request and gets loaded to the page, but after that the real ReactJS gets loaded, adding interaction to those initial components loaded directly from HTML (that process is called hydration).
The statically generated files are built by NextJS on deployment, these files can be served by NextJS itself (when running on a self-hosted environment), or they can be uploaded to a more conventional website hosting solution.
If you need more details, let me know.
I'm developing an cordova app for Android which has a lot of logic (js) and design (html/css) same as my web application. I want to share these assets among web app and android app. Now I had compiled all these js and css in apk, but when some code is changed, I have to prepare an update and put in the play store. If it would be possible to load code and css from server after app started, it would reduce need for upgrading. Is there any way?
I'm considering loading shared resources via ajax and dynamically creating stylesheets and scripts in DOM, but maybe there is better approach, isn't it?
You could download the files from server every time, but i think that is not what you want because it would not be availibe offline at all and if the app it big and the connection bad it will take much time to download.
a better way is to download the files if they change. you can do that with FileTransfer.download() yourself or use a ready solution like the cordova-standalone-hydration
BUT your app will not be accepted by for example Apple because they deny an app with code they can not check
I found a plugin where you can update all your files in the WWW folder on startup or later.
Link: https://www.npmjs.com/package/cordova-plugin-dynamic-update
I am developing Web Application using MEAN(Mongo, Express, Angular, Node) JS stack.
I would like to use PhoneGap to compile my clients for Android/iphone native app. At the same time I want to keep same client-side Views & AngularJS code to remain usable for desktop browsers. I am using bootstrapper for Responsive design and it works fine for me on mobile browsers.
I saw, Phonegap require us to include some of it's own Javascript files, and I will be required to have few more .js files in footer of index.html.
If I pressume, I should not be using server side .jade engine for index.html file, and all my .html should remain in client side.
will index.html created for phoneGap will cause problem, if I use it for desktop browser? Should I have different index.html for browser and phoneGap input. Can grunt help me in customizing index.html files.
What are the other things which I should take care of for my needs?
My advice for you is to separate the projects, Phonegap or Cordova Apps doesn't have a running server, they serve the html files through the file:// protocol.
If I pressume, I should not be using server side .jade engine for
index.html file, and all my .html should remain in client side.
You presumed correctly, no .jade templates should be used, your views should be plain html files or, if you want, load them as scripts so you don't have to load them on page request increasing app performance.
will index.html created for phoneGap will cause problem, if I use it
for desktop browser? Should I have different index.html for browser
and phoneGap input. Can grunt help me in customizing index.html files.
Yes it will, if you try to use an index,html from phonegap on a desktop browser you will get a lot of javascript alerts. Since phonegap.js is expecting to get some events that are fired by cordova when running on the device. And this gets worse if you have Cordova plugins.
This is a best practice type of question. I am developing a complete AJAX application. The user navigates to the main page of the application and everything from there on out is loaded via AJAX into the content section of the main page. Is it better to take all the javascript files I have and merge them into one file that is loaded on the main page or to split them up into just what is needed for each page that is loaded?
Putting it all in one file obviously has the benefit that only one HTTP request is made to load the javascript needed for the site and any request for a page there after will only need to fetch the HTML. But, this requires that every event that is wired up (using jQuery) be attached to the document using the live or on function. So everything will look like:
$(document).on('click', '#SomeButton', function () { });
Doing it this way will cause there to be many hundreds and possibly over a thousand events being tied to a single element, the document.
Putting them in separate files requires multiple HTTP requests to be made to load the various pages of the site but limits the number of events that are attached to the document.
Any thoughts on what is best here?
I would vote for separate js files for each page for bigger projects specially if your project is using any js library like jQuery and its plugins like grid plugin etc. In case you have a big single javascript file your first page will load slowly obviously giving your user a bad first impression. What we do is that we create separate js files for each page specially when there are ajax calls to load data for the pages. Plus there are separate files for each pluggable component like custome drop down or date counter etc. This way its easy to manage the code and customize it later.
Before deploying the app we can merge related files and create single file for a single page. For example if a page called editProfile.php uses a data picker, a jquery validation plugin and custom js to load user data, we can combine them in a single file so that only file will be loaded for a single page.
So I would vote for separate files for each page and applying optimizations before deploying.
Honnestly i'm not really an expert in this domain but this is my piece of advice on this subject on a production environment.
I would use CDNs for libraries (like jquery). They offer maximum cacheability, and there is a very big chance it is already cached in your client's browsers from visiting other websites. This saves some requests already.
Group and minify your common javascript code, like plugins, utilities, things used throughout your site. It will be requested once for all and will then be available.
Have a separate, minified, script file for each "page" you load dynamically that you will load along with your content.
Loading script for content pages:
Using the .load() method from jquery to load fragments of pages will unfortunately remove any <script> tag present in the fragment. As noted in the jquery load() method, this is to avoid "Permission denied" in IE.
What you can do is to have a <script id="contentScript"></script> tag in your base page and load the script along with the content by replacing the src.
I don't know if it is a good practice but it makes sense to me :-)
www.mark??z.se/test
Remove the: ??
It is only 4 files:
index.html
appIcon.png
startup.PNG
SMS_2.jpg
How can i make this to an offline app, is it possible?
The CSS and all JS are in the html file.
Read about creating offline web apps here:
http://diveintohtml5.ep.io/offline.html
The iPhone Safari browser supports offline web apps. You need to:
modify the webpage to reference a cache.manifest file
create a cache.manifest file listing the resources that need to be downloaded
configure your web server to serve the cache.manifest file with the proper content type
I used this reference (among others) to create an offline GWT web app. iPhone/Safari can "bookmark" the website by using "Add to Home Screen" so it looks like an iphone native app.
Good luck.
The UIWebView
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html
is capable of displaying html content that has javascript and css associated with it. I should be possible to include your files as part of the app's bundle and have the UIWebView load them. Have a read through that class reference and sample code to see if it suits your needs.
in a desktop pc, be shure every resource is boundled with the html file, css inlines, js inlines, images encoded in css via url('data:image')
#see http://en.wikipedia.org/wiki/Data_URI_scheme
and associate a browser to html files, doubleclick on the page will open your page.
also chrome has a "create application shortcut" that will make an even more "native" frame around your html5 app.
prism https://wiki.mozilla.org/Prism is the same concept implemented with mozilla engine.
in mobile browsers based on webkit there are similar means to exploit, i.e. for iPad you can create shortcuts in the home screen that will look exactly like a native application and access a 5Mb of file cache(http://www.html5rocks.com/tutorials/appcache/beginner/).