I am working on Business intelligence based web dashboard, i have tried several Third party JavaScript grids namely JQGrid, ng-grid.
Problem is that when Grid try to Render with big data Object it stuck and crash the browser.
Now i am thinking to Write my own GRID using HTML5 web-worker,it will create html mark up in String from data object and then pass to main object and append in DOM.
Please write suggestion about this approach,
and name the Grid that use this approach if any..
Thanks
One of the most performant grids for huge amounts of data is SlickGrid.
If you are to write your own you should ensure you avoid paints, like comments mention, and use a virtual scroll if you really have a lot of rows (100k+++).
I once started writing my own grid and I can guarantee you that making it performant for lots of data while keeping it usable is not exactly an easy job :)
Related
I am new to React js and I have been trying to understand what real problem does js frameworks like React,Angular solve and why one need to learn them.
Of Course when i see advantages of framework everybody talk about "Shadow/Virtual DOM, Router, Reusable Components etc" , but then I stumbled upon below links which talk something different
https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445
https://www.codementor.io/binarymuse/react-components-from-a-jquery-programmer-background-du107k2lz
but they were not clear to me
So i am meaning to understand how difficult it was to maintain js/jquery code before these framework came by.
Everybody is just asking to learn these frameworks because they are popular but none of them clearly explains why they are popular and what problem they solve and how they make our life easier when it comes to creating web-app from scratch.
Others have already mentioned the advantages and what these frameworks resolve.
I wanted to add what problems they can create:
I have seen many people that use a framework see it as a hammer and every website as a nail. In other words they either don't or can't figure out that in many cases a framework is not needed. I have seen web pages that are nearly 90% static data still download an entire framework just to provide drop menus or something else trivial.
Frameworks force you into a lifecycle and development style that, in some ways, make some things easier and other things much, much more complicated. AngularJS had a nasty digest cycle that often led to complications. Redux forces you to write much more code than needed just to handle state that on many pages is not needed. Vue, React, Angular all force you to either use their data creation functions, their way of rendering or their way of handling inter element communication. And none of these are faster than vanillaJS. Even virtual DOM has its issues.
The size of a framework is often much more than needed. I have several small libraries that do the majority of the work that a framework does but my code is in the sub 5K range if I load it all.
Some people that learn a framework first can not figure out how to write in raw JavaScript. They also tend to learn sloppy ways to write code. No, not everyone, but a large number people that did not start with vanilla JS write code that tends to be much larger and sloppier than needed.
It is best to avoid JavaScript except where really needed. Often I can use raw HTML and CSS to do everything I need to do. I find that it is rare that I need to use much JavaScript even in projects that exceed several thousand files. It is faster to allow the browser to process HTML and CSS, which all processes at compiled speeds and only use JavaScript for things you can not do in HTML and CSS.
You don't "need" to learn them, but many people and companies use them. The main advantage is being able to have your entire site on a single webpage, where you just modify the data and it handles changing the elements on the page for you. For instance, you can just think about "put the user's name here, and when they click the button, add another list field there", but you no longer have to think about "get this DOM element, set its innerHTML to the user's name, and when they click the button, create a new DOM element for input, another one for the label, get the container element, append the new children". It also allows you to more easily bind data to DOM elements, so you can just say "this field is for the variable 'numberOfItems'" instead of worrying about grabbing the DOM element and its value and storing it into numberOfItems when you need it; with React/Angular/etc. that variable will always be up to date with the user's input without you needing to update it.
TL;DR: The frameworks are not necessary, but they help automatically handle a lot of common, tedious DOM manipulation for you in a way more optimized than you'd likely end up implementing yourself, with less code for you, and all on a single page instead of having to reload the page every time you want to display new data or a new layout.
What is React JS?
ReactJS is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.
React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. This corresponds to view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC.
https://www.c-sharpcorner.com/article/what-and-why-reactjs/
This is a wide discussion about frameworks in general. Is easy to say React, Angular and so on makes easier to manipulate DOM elements and reuse components, but to apply frameworks usually are about if solve your problem.
in javascript we have load the webpage by using location.href but by using angular/react we the page updates automatically.
I've been using Struts2 as my MVC framework as part of building a J2EE-based web application.
Part of the application is to display reports (HTML tables) that are mainly thousands of rows and tens of columns in size. I have implemented pagination to make the report readable etc...
The way the reporting system works today is as follows: The entire data is prepared in an OOP approach and placed on the ValueStack. A corresponding JSP would read the data of the valueStack and use JSTL to draw the HTML code.
I'm in the process of revamping the code and i would like to revisit this logic to conform with the best practices in the industry. The main question here, what are the best practices out there?
Rendering and drawing the report is taking time. Especially on IE-based browsers where the page becomes unresponsive until data is shown (IE8 support is a must im afraid). So what is the best option?
Is it using javascript frameworks such as jQuery and move the drawing part to be client-side? Do I know store the entire HTML code on the value stack somehow and display it in 1 shot?
What's the optimal way in your opinion?
When and how to use pagination is primarily use-case based, and should be evaluated for each case, basing on the number of overall records, the number of records per page, the size of a single record, the main devices used in the ecosystem (prevalently desktop, prevalently mobile, mixed, etc...), network, server and database capabilities, and so on.
But IF you decide to go with pagination (if you have a lot of record, it is the only choice), then the only Best Practice is to load only the data needed for that request.
If you want to see results from 90 to 100 in a resultset of 10.000, it would be awful to load all the 10.000 records in the page; it would be also wrong to load all the 10.000 records serverside, then transmitting only the 10 requested to the client; the filtering must be applied at the lowest possible level, generally the database.
Since you have tagged this Struts2, jQuery and Grid, I strongly suggest you to take a look at the Struts2-jQuery-Grid-Plugin, and its Showcase.
It is new and actively maintained, it only needs a small effort on the initial learning curve.
It is the Struts2 wrapper of the native jQueryGrid (you can use the original one, if you want to handle the Javascript on your own).
There are over 200 questions here on SO on jQGrid pagination, good read.
Just wondering if anyone had the need to edit and update data straight in a HTML table using Laravel?
I have built out all the "create" tables for various tasks, but would like the ability to alter the data straight on an "index" page.
There are various JS libraries out there, but I was wondering if anyone knows or has done this within Laravel?
any feedback would be much appreciated.
Since Laravel is a server-side technology, you would probably want some sort of javascript library to achieve that functionality--unless you're willing to use forms that look like tables or tables with form elements inside them. You might also have some luck with contenteditable attributes and events. HTML doesn't have an editable form out of the box that automatically interacts with the backend (Laravel in your case).
It depends on what you want to use the tables for; if your tables have a lot of data, you might later want sorting or pagination and that's something javascript table libraries are useful for.
If your tables are simple or exist mainly for style purposes, you might be able to get away with not using javascript much or at all. It would be fairly unusual to go this route, though, and probably take a little longer to get a working prototype.
I'm using Laravel Datatables for data display on Laravel 5.3.
And thinking of extending it with this paid version of table editor.
There's an extension for Datatables editor integration.
Seems to be the best option for my project so far.
I'm looking for a way to do spreadsheet type actions with a table on a website that I'm creating. I looked quickly at KendoUI, but that seems to be a little too far out of my budget. Wondering if there was anything cheaper that I could use.
The main features that I'm looking for is to be able to hide columns, filter rows, and row selection via click-drag.
I have very little js experience, but don't mind looking into it to get started. Would need some direction in where to look for that.
The web application is php based, and runs off of the CodeIgniter Framework.
You need to use jQuery plugin, depending on your need, you will find greats frameworks
I've done a bit of searching and found this one:
http://visop-dev.com/Project+jQuery.sheet
Here's the problem:
I need a table I can quickly 'plug' into my webapp.
I have existing REST endpoints for getting the table data in JSON, either with pagination or without. Now, if I could only find a JS table component that I would configure to use my endpoints (I can modify them to meet the tables requirements).
Misc: If the table requires jQuery that's fine with me, and utilizing Twitter Bootstrap CSS is optional and much welcomed.
As Toni said in his comment, jqGrid is probably your best bet for quick results, and it has extensive styling options. Be aware though that the HTML it produces is quite verbose. If you are deploying to mobile it may make sense just to spit out your own HTML table. This is dead simple if you are using jQuery already.