This is the problem we have. We have a spa and there are some pages that generates some reports. Those pages allows users to download some graphics generated by the spa. The download can be done with a word (docxtemplater), pdf (pdfmake) or just images files (jszip and download.js). All this is done by the spa (in the browser). There are two problems: as users start to add more data then the download is taking more time to render. And we have seen there are some incompatibilities due to some browser/OS versions. The main issue comes from generating images from the dom. We are using html2canvas (slow) and dom-to-images (fast but only working in chrome for us now - we had some issue when trying to generate images from some google charts).
What we are looking for now is to move all this into the server so we can have a controlled environment so it has support for IE, Safari, Firefox and Chrome. The idea is to generate all these files in the server.
I've read we could accomplish this by using phantomjs, phantomcloud or nightmare. Our backend is REST using java. So, before I dag into this, I'd like to know if anyone has experienced a similar issue or can point me in the right direction.
Related
Due to the safety rules of the same-origin policy (SOP), i am unable to load certain local files when opening an index HTML-file directly with a browser. Using a "live-server"-plugin works fine, as all the files in that case are "on the same server". I need to distribute the website as a client-side only app - A folder and html file to be opened with your browser. Solutions to the problem always seem to require setting up a server. Is there any way to avoid that, and keep everything on the client?
I am making a mathematics e-book, that i want to distribute as a website people can download. I want it to be client-only and a download, since if it were to become popular, then i wouldn't be able to afford running the server (as i would be studying at that time). I have chosen html and javascript over EPUB, as they are much more powerful, and allow for tons of interactivity (and much more efficient development).
So far i have a browser.html file, that loads individual pages with JQuery .load(). This browser.html file has both html, and javascript. The CSS is in an external file. The individual pages have many pictures, that are also stored locally on the server. As the pages are contained in subfolders, the picture URL's go out into their parent folder, and into the assets folder, like: ../../../Assets/Chapter1/Talopgaver og intuition/Misc\F\solsystem.png. I use custom-elements (shadow-DOM) to handle various complex aspects such as questions, answers, along with certain other things too. Other than JQuery, i also make use of Math-Jax, and a "polymer" library that helps with cross-browser support of custom-elements. All the pages in a certain chapter are loaded in the start, and then put into a array (this makes it fast to scroll through pages as you often do in books). They (as strings) are each modified slightly to automate certain tedious parts of development.
I have tried to open the browser.html file on chrome, firefox, internet-explorer, and edge. They all load the html that browser.html inherently contains (properly styled even), but none of them load any external pages. Interestingly, one of the images used in the browser.html file still works (i would think that would be a local file too, not?). If have tried turning off calls to ajax or external CSS, but nothing changed. I have searched for other people with similair problems, but all the answers just reccomended setting up a server.
When loading the page with a live-server plugin, the result looks something like this:
browser.html page opened with "live-server" visual studio code plugin by Dey, Ritwick
When opening the browser.html page directly using chrome, it looks like this:
browser.html page opened directly with chrome
The error i get (after having removed an ajax .get() call) isn't particularily descriptive: simply "Failed to load resource: net::ERR_FILE_NOT_FOUND" from "platform.js:1". Even if turn off the call to start loading pages, it gives me excaclty the same error messages.
Looking at the network reports, with live server it looks very ordinary. without it's pretty weird. It says it takes hours to load browser.html, even though that clearly isn't the case. It fails loading platform.js, after using 22 seconds trying. The networks report looks a bit more healthy when turning off the call to load pages. It gives up loading platform.js faster (8 seconds), yet still supposedly takes hours to load browser.html.
Though it shouldn't ultimately be neccesary, i have linked the entire browser.html document below, along with an example of a page it might load (the example in the first picture above).
browser.html. Too big for a stackexchange code-block embed
Page in previous picture (page 37)
Any help is appreciated!
EDIT: Main problem seems to be the loading of pages using JQuery.load(). Even on a simple testing website that operation is just not possible without running on a server.
I'm trying to make small interactive physics demos and mini-games which should work
offline - by simply opening the .html file in browser (preferably without any localhost web server)
online - hosted on github and using http://rawgit.com/
But I met several problems:
Online I have to load *.js libraries from cdnjs while offline I have to load them from some local file. How to make .html that will automatically load dependencies from proper source?
Composing the web page from several independent files also works differently online and offline
Loading resources (shaders, 3D geometry objects) from external files - the same story.
For example, how can I let user to choose (e.g. depending on some <select> widget) which shader or 3D model to load from files hosted on gihub server ?
The most painful is file I/O to user hard-drive (i.e. to save and load data which user created). For some security reasons file browsers does not support it, and solutions which I found are either a) not working or b) terribly complicated workaround or c) having many dependencies (jQuery). Best what I found is this save and load.
These problems gets better if I run some localhost server (simplest is to use python). But this makes it inconvenient for the end user. I would like a .html file which the end-user can simply open offline in his web browser and it would work without any server.
Is node.js environment somehow relevant / useful for this purpose?
Examples:
There is some example of what I'm doing:
https://rawgit.com/ProkopHapala/SimpleSimulationEngine/master/projects/SpaceCombat/HTML/StickSpaceCraft.html
There is example which works well offline but not online:
https://github.com/ProkopHapala/SimpleSimulationEngine/blob/master/js/PlanetDesigner/PlanetDesigner.html
background:
I was never interested in web technologies. But recently I found that javascript with WebGL and other HTML5 stuff can be greatly useful in areas which interests me (numerical math, physics, 3D graphics, games). Inspired by examples 1, 2, 3, 4, I started to learn javascript and HTML with goal to make simple demo which interactively illustrates some problem from my domain of interest.
As I know you can only use frontend technologies in github, so you must leave the node.
But for making your app work both offline and online, You might be able to build a CACHE MANIFEST file (for example offline.manifest) and write the files you want to be cached in them. for example:
CACHE MANIFEST
mystyles.css
image/mypic.jpg
jquery-1.4.min.js
script.js
index.html
and load it with manifest attribute in your html:
<html manifest="offline.manifest">
There is a technology by the named of indexedDB, Which you can use it as a front-end Database. You can use this too.
The product I'm working on has some nice graphs on a HTML5 dashboard. The graphs are rendered in Javascript using Flot.
Users would like this Dashboard emailed to them daily as a PDF report, on a fixed schedule. So for example they want an email every day at 8am to be emailed to them.
I've thought of using Python's Requests (i.e. do a request.get) to get the HTML5 source of the page and then convert the resulting HTML5 page to PDF using Weasyprint but this is obviously not going to work.
The Javascript charts are the biggest headache as they won't render unless viewed in a browser that has decent Javascript support, so the outlined approach won't render the Javascript graphs.
What's the recommended way of converting a dynamically generated HTML5 page into PDF? How do other people do this?
PhantomJS is the solution. It's a headless WebKit implementation that allows us to render to PDF the dashboards with Javascript graphs and all.
I've now set up a batch job that will run every day to convert our dashboards to a PDF document that gets emailed to the users.
Addendum
Some other things to be aware off. In the current 2.1 build of PhantomJS, there is a bug that causes renders to PDF to clip. The fix is scheduled for 2.2. A temporary workaround as detailed on the bug report is to set the CSS zoom level of the document. The following CSS fragment works for me.
html {
zoom: 50%;
}
i am trying to improve the performance of my web application.
It is a java based web application & deployed on an amazon cloud server with Jboss & apache.
There is one page in the application that is taking 13-14 seconds to open. The functionality is so much that there are about 100+ http requests that get executed on page loading time. The Js & css files are taking too much time to load.
So i moved all of the Javascript code from my JSP page to new JS files. Minified the JS & css files. Still there is not much difference in the page load time.
There is dojo data on this page as well which takes time to load.
Is there any other appproach i should try to tune this page?
Can something be done at the Jboss or Apache level?
Apply caching for images etc. More here
Use CDN for any external libraries you use (like jquery). More here
Use a library for your js scripts like RequireJS to optimize your css and js files. You can concatenate (merge multiple js files to one) your code. This will reduce the number of ajax calls (that's what the browser does when it sees a js or css dependency) (As #Ken Franqueiro mentions in the comment section, Dojo already has a mechanism for this). More here
Optimize your images. Use appropriate dimensions. Do not use full blown dimensions if you just intend to use it for a 10x10 container. Use sprites if possible. More here
Show a message/loader to show the user some progress. This will minimize the user restlessness More here
If you load data that takes too long, then show the page and load the data afterwards. This will too give some sense of progress to the user.
If the response is very big you can compress your response data. Be careful though that the browsers your application supports, can handle the compressed information by default, or add a custom mechanism to decompress the data. More here
Use some profiling tools like Chrome Development Tools or FireBug for Mozilla.
Take a snapshot of your network traffic and check where the bottleneck is.
In Chrome you press F12 and then select the Network tab.
I am developing a WebView based Android application. This application is very responsive and fast on major Android versions i.e. 2.3 onwards but it's very slow on Amazon Kindle fire. One of the reasons for this sluggish behavior is it's reading lots of xml files (40-50) to load contents in a single html page and there are also hundreds of images per page.
One solution that I can think of is to read and parse xml files using native Android APIs (in a thread) and then incorporate the parsed xml into the html page. Could anybody please tell me how to use Java object in JavaScript? Any help would be highly appreciated.
For your parse slowness issue
Have a JS-> Java Interface to parse in Java and have those XML data fetch operations in Java too.
Displaying too many images slowness
Display only selective set of images as you scroll. Displaying all the images together puts a heavy load on the browser rendering. So use a Lazy Load (jQuery plugin) - http://www.appelsiini.net/projects/lazyload to only load when the user scrolls.