My background is from mobile development and I'm quite new to Javascript so I'm quite confused about the following.
I'm trying to build a JS module that handles a list of data and displays them, so I'm looking for something like JS ListView with the following features:
it accepts an array of objects
it accepts an HTML template (in any format) to render items
it renders only visible views so it can handle large datasets (virtual list)
it can handle item click to return index/underlying object
it supports data modification (item add/remove)
it's free
not under GPL (as long as I understand it correctly) so it can be used in a project without the obligation to submit the code to open source
it supports filtering/sorting (this one is optional)
As a mobile developer those requirements seem to be pretty default to me, but I'm not able to find any suitable solution for several days already.
The options I've checked are:
dhtmlxList - the closest solution I've found so far, but it's under GPL v2 that requires posting the code to opensource.
vue: lacks virtualization/filtering
lists.js - great one, but I can't get how to handle item click to get the underlying object/item index
vlist - a good one, but doesn't handle data modifications though
webix - looks great, but seems to be too "paid"
bunch of libraries that I even can't already find links to
I believe I'm just looking in the wrong direction or using the wrong search terms as it all seems to be pretty standard and any input is much appreciated.
And sorry for stupid question, but in general, how do you handle common UI elements in JS world?
Is there any comprehensive libraries of UI elements for JS which is free and not under the GPL license?
Just went across this Vue component:
https://github.com/Akryum/vue-virtual-scroller
It seems to be what I was looking for - data driven efficient list for javascript (though it's based on a Vue framework which might be not that straightforward to integrate if you don't know it)
Still solves my problem and maybe it would be useful for someone else.
Trying to wire in different components from different libraries / frameworks can be daunting,if you this you would have need for other components for example slider, spinner etc you could pick a framework like ionic that provides to components out of box.
Related
Can anyone suggest a simple quick and dirty method of providing autocomplete for a text field for example. I may also consider a drop down later on. I can think of a few strategies for doing this, but I'd like to stay away from non-standard Django packages.
Are there any JS libraries that would help? I am thinking for speed, I simply need to query the options - i.e. the text fields and let the JS/JQuery figure out which one works best and I'll expose the JS/JQuery library to that list of say keywords.
Any suggestions to save time?
There is pretty much one option I'd suggest:
django-autocomplete-light’s purpose is to enable autocompletes quickly and properly in a django project: it is the fruit of half a decade of R&D and thousands of contributions. It was designed for Django so that every part overridable or reusable independently. It is stable, tested, documented and fully supported: it tries to be a good neighbour in Django ecosystem.
Its easy to setup, has no dependencies and plays very well with django.
jQuery UI contains quite easy way to create autocomplete inputs.
https://jqueryui.com/autocomplete/#multiple-remote
You can check working sample from here:
https://michalcodes4life.wordpress.com/2014/03/11/ajax-autocomplete-search-with-jquery-django-and-tastypie/
In my company we've built a few in-house mobile web apps based on jQuery Mobile. Now we're transitioning to more serious stuff, and JQM has been ruled out because it is too slow. (We did our best trying to configure it, but in the end it was all in vain. Even in quad core mobile devices it takes 1s. to process a button click).
However I loved the way it loaded pseudo-pages using ajax. Since we have many developers familiar with JQM's Single Page approach, I'm now searching for a replacement working in a similar fashion. I'd like to know if as of now (2013) there exists a library or framework meeting most of the following requirements:
It swaps in and out the html of each "page" into the main one.
It provides at least one lifecycle-related event (e.g.: onPageLoad, onPageShown, onPageHidden, etc)
Single html file for each "pseudopage".
Fully Javascript based.
Bonus points. It would be nice if:
It provided a standard way of passing parameters to the "page" controller or initialization callback, or some built-in mechanism to help with initialization or recreating state. (I don't want each dev doing this in a different manner).
It handled the back navigation, maybe allowing parameters back to the previous "page" as well.
It allowed to choose whether to recreate the "page" each time it is shown, or show it in the last state.
However I don't really need:
Mandatory complex MV* stuff. We'll be using an ORM and there'll be DAOs but we don't want to be forced to code adapters to adhere to the framework's idea of what the model is.
Updates to the view when the model changes.
Templates (the views should be HTML5 and no preprocessor tool should be needed).
Built-in widgets (The design guys had enough with jQuery Mobile and they'll be using something different, probably Bootstrap).
(However I don't mind if it had any of these as long as they are optional to use)
I think it would not be very difficult to do it myself, but I'd like to hear your suggestions before reinventing the wheel. PagesJS looks like a good candidate by the moment.
I finally made my own jQuery plugin. It manages the page-swapping and the ajax loading from files, firing custom events before and after each page is shown. Took no more than 150 lines comments included. I kept the parameter-passing stuff out, though.
I've been asked at work to convert a popular mechanical engineering excel application to a single page web application. It requires no database so my idea is to put everything on the clientside in javascript.
First version is gonna be pretty small but more complexity will be added further along. Canvas graphics is gonna be drawn in realtime as user changes input. So performance is important. My question is: Should I use a MVC framework such as Angular JS? Or is it better to stick with Jquery? If I should use a MVC, which one is best suited for this app?
Everyone at my company uses IE9 so I dont need any support for older browsers.
Angular bills itself specifically as a way to build CRUD apps - basically database front ends. The app you're describing doesn't sound like it's doing a ton of that, so Angular would probably be more trouble than it's worth.
jQuery is a helper library - it makes dealing with the DOM easier, but doesn't do a thing to provide overall structure to your application. jQuery is a "necessary but not sufficient" in my book - you're going to want it, but it's not enough on its own.
Personally, I'd lean more towards Backbone, specifically because it's so minimal - it gives you some useful data binding stuff and some hints on how to organize your app, then gets out of your way to let you build the abstraction you want. Based on the fact that you mentioned the original is in Excel, some sort of data binding / change notification system is going to be important. This way you can emulate the spreadsheet's "change a cell and the chart redraws" system that everyone's already used to.
In the end it's hard to say without more detail on the app in question, and what kind of calculations / how often they have to happen are. Figure out what your app architecture should be, find (or build) a library that helps implement that architecture. It might be MVCish, it might not.
Well jQuery will get very messy as complexity increases. Angular JS is an amazing library but there are also a myriad of different ones out there. Depending on the Mechanical Engineering principles you are working with using AJAX may prove to be more perform-ant, due to the lack luster power of some older browsers.
It really depends on the complexity of the calculations, but in terms of dealing with events and managin the structure I would suggest using Jquery as well as Angular on top of it. then make the decision about whether or not to move some functions to the server or not, based on performance.
I would like to test a web app that was drastically redesigned to use ExtJS to drive its UI.
I have done some online searching but couldn't find any recommendation for a good framework to handle it properly.
Up till now we have been using WatiN to create tests.
Note that we do not own the web app code.
What are the best options currently available?
You should look at using Siesta, it's a unit testing and functional testing tool designed to help you test Ext JS and Sencha Touch (and it's also used by Sencha internally to test Ext JS itself). Since Siesta knows a lot about Ext JS you can write expressive tests using Component Query instead of CSS and get much more robust test compared to simpler tools described in other answers in this thread. Here's a sample test script in plain JS:
t.chain(
{ click : ">>textfield[name=user]" },
{ type : "Mike[TAB]Password" },
{ click : ">>button[name=loginbutton]" }
);
DISCLAIMER: I work for the company that created it.
http://www.bryntum.com/products/siesta/
Are you looking to do a straight functional test of your web page or are you looking to narrow your tests specifically to the JavaScript in ExtJS?
If it's the former (functional at the UI level), then WatiN/Watir/Webdriver ought to work for you. (If they're not working then I'd love to get more details around specific issues you're running in to.)
If it's the latter then you might investigate Jasmine which gives a lot of interesting capabilities around unit testing your JavaScript at the UI layer.
(If it's functional testing, you might also check out Telerik's Test Studio for functional automation. I'm the Evangelist for that tool, so I'm a bit biased...)
You may want to look at RIATest.
Version 5.0 fully supports ExtJS testing. ExtJS UI widgets are first class citizen in RIATest. This means that unlike other HTML testing tools you do not need to write tests that manipulate the HTML DOM elements. The tests in RIATest operate in terms of ExtJS UI widgets.
Examples of RIATest scripts that work with ExtJS widgets:
The following clicks on an ExtJS button with label "Next Page":
ExtButton("Next Page")=>click();
And the following does drag-n-drop of a row from one ExtJS tree to another:
ExtRow("Controller.js")=>dragAndDropTo(ExtTreePanel("#tree2")->ExtRow("Custom Ext JS"));
And this collapses the header of an ExtJS box:
ExtBox("Feeds")->ExtHeader("FeedsВ")->ExtCollapser()=>click();
(All sample code above is from real test scripts that run on ExtJS sample applications).
RIATest also knows when to automatically wait for ExtJS AJAX to finish, so if your UI does dynamic content downloading the tests will auto-magically wait until data is received from server.
(Disclaimer: I am a RIATest team member).
Sahi is an automation and testing tool I have recently come around as I am in a similar search as you... Selenium hasnt worked for me (as it hasnt for many around the web... havent found anything to make it work... dynamic IDs and other Ext related particularities mess with it apparently)...
take a look at sahi maybe it will be useful... www.sahi.co.in (I have no relation, I discovered it recently and found it useful).
You want to do Functional Testing. Selenium is a good choice. It has API implementations in a slew of languages (Java, Ruby, Python) and it uses Webdriver under the covers.
Ranorex can handle Ext-Js as well, although turning it into first class citizens will require some custom coding. The secret in general is to avoid using id's for object recognition, as they change around and use innertext property instead.
Personally found using xpath with extjs flaky in places.
You're better off (in Java) writing a method which uses a JavaScript component query to pull out the element id. (if it has one)
If I am starting a new project how should I pick between using YUI 2, YUI 3 and jQuery?
I know there are a bunch of questions/answers already about can you use them together, but I am trying to figure out what criteria I should be thinking about to make my decision.
Are they overlapping?
Is one better at GUI and the other better at internals?
Do they play well together? My understanding from other questions is that they can live in different namespaces, so they can live together, but that doesn't necessarily mean that it is good to use both.
Thanks!
If you are familiar with neither, I personally have found jQuery's documentation and API easier to understand than YUI's, at least for simpler things. It also appears there is more jQuery related information than YUI on stackoverflow.
YUI does have its users and supporters though, so check it out in case you end up finding it suitable for you. It's got a huge library of additional modules you can use for complex web applications.
My usual advice would be to go with whatever you're familiar with, and I say this because I don't think it's worth dropping one to start learning the other from scratch. But if you are familiar with neither, then you should check out how easy the documentation for both is to understand.
PS I would not recommend YUI2 if you're starting anew as it has been superceded by YUI3, which is much better designed.
We need more information about the type and size of the project before a proper library can be suggested.
For example, if you're building a semi-complex/large-ish web app, I would suggest Dojo or ExtJs. Otherwise, for smaller projects, jQuery might be more appropriate. I cannot comment on YUI as I have not used it.
Impossible to say without knowing more details about the project. Use jQuery or Prototype for things like DOM manipulation and making autocomplete, etc. If you need a more powerful Javascript implementation take a look at ExtJS, which is basically a full stack framework for Javascript.
Both are JS frameworks and there to help you. YUI is known to be more natural in them and more closer to the original Javascript while jQuery is known as more easy and you find more jQuery users and support around then YUI. However, as said earlier, it depends on the project, if it is likely that you will be making your own custom widgets, I will suggest you to go with YUI but if it's like a simple e-commerce website in which you just need some fancy galleries and shopping cart, go with jQuery, you will learn and implement that quickly. I am not saying that you can not go more in depth with jQuery but my impression is that jQuery is more of a CakePHP for PHP like of framework which gets you off the grounds quickly.
In my opinion there is no need for you to use them side by side in a single project, that will just produce the over-head as both do whatever you want to do in them i.e creating dialog panels, autocomplete quick searches, event related utilities etc.
I am writing down a series of beginner and mid-level tutorials for YUI users, let me know if you find them useful or if there is anything else where I can help.
http://ciitronian.com/blog/tag/yui/