The server side is pretty much set up, it's basically
struts 2 / spring security / jpa.
Now I have to decide what to do with the client side (the browser). The client side codebase should be maintainable and should lend itself to automatic regression testing.
So as an example lets say I need a table component having properties such as
sortable/pageable columns
reordering of rows and columns (via drag & drop)
inline editing of table cells
remembers state when customer re-visits page
integrates easily with struts 2
As far as I understand things there're 4 alternatives
DIY using oldschool HTML + JQuery + Ajax
Finding a JQuery plugin that does all this or
plumb together different plug-ins (like Flexigrid + additional plug-in for drag & drop)
Using a JS toolkit
Should I stick with JQuery? Or should I go for fullblown JS toolkits? I have little experience with JQuery and JS toolkits (I'm not a web developer).
Thank you for helping a serverside programmer cross the messy world of web-ui-programmming ;)
My experience is that Dojo's support for programming-in-the-large is great if you have a large-scale app that will benefit from the build system, class system, widgeting system and integrated widgeting library. It also of course brings all the standard stuff with it, like cross-browser support and event system.
If you just need some widgets and animations then any library will work. I'd stick with the one you/your team knows best. jQuery definitely has the greatest number of people with that skillset.
Our team wasted 6 months trying to give the client what they wanted with JQuery/UI, and we switched to ExtJS 4, and the client is happy after 2 months. This is an app with 50+ models.
JQuery/UI is NOT designed for web applications. It is designed for web SITES. Sure, it has some good plugins, but you'll spend countless hours learning their apis and switching your thought process between them all. JQuery/UI lacks the following:
a graphical designer (see Sencha Designer 2), ie graphical layout GUI program
complicated layouts (in ext you can switch a layout of a container to accordion, tabs, wizard, anchors with one setting)
a grid (ext grid supports paging, sorting, filtering, grouping, summaries, editing out of the box)
real comboboxes
a model view controller system
templating
good html editor control
a whole ton of other stuff
do yourself a favour and spend the money on ext, and save yourself countless hours.
regarding the grid you mentioned, ext's is far superior to anyone else's. you can do what you listed in about 20 nicely-formatted lines. i am not kidding.
regarding client-side unit testing, use jasmine with ext.
The short answer is yes. Frameworks like Ext.js take care of a whole lot code that you would end up writing yourself if you were to write everything from scratch. These frameworks take care of models, events, views, communication with servers/APIs, etc.
This isn't really an answerable question. It all depends.
ExtJS is great for very specific things. If you want those very specific things, it's likely the most efficient option for you.
If jQuery UI meets your needs, then that's your answer.
If you have jQuery dev's, maybe stick with jQuery.
If you have ExtJS folks, consider ExtJS
etc, etc.
Related
We have several internal LOB applications developed in ASP.NET web forms. We have/had always used Html tables to layout data entry forms in these applications.
They have worked fine as they are internal applications and for the most part we control what browsers our users use to access them.
I was wondering what's the latest way to design asp.net data entry forms? we looked at bootstrap but either we will have to use 'their' grids or html tables ( if I am not mistaken).
Just wondering if we are missing out on something.
Thanks
You are asking a broad question but I will try to give you some guidance based on a few basic assumptions.
Tables are a very outdated approach to layout so any attempt to modernise your apps will involve moving away from them.
Bootstrap is an excellent choice for internal apps because it gives you very high standard of presentation for very little work. Yes, things look a little generic but for internal apps that's rarely an issue, compared to on the public web where a site usually needs to define it's own identity. And if you do want to up your game with the visuals, there are loads of good themes to choose from.
Bootstrap has lots of side benefits as well - for example if you use the grid system correctly you get mobile support almost for free.
The good news is that you can bring in Bootstrap and gradually migrate your layouts across. Adding it to a solution doesn't mean you have to remove your tables right away, you can do it on a per-page basis or as part of some other ongoing maintenance process. This hopefully addresses your question of using either grids or tables.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Like, can I write a business strength application in HTML5 that mimics our current system that contains many highly interactive grids, custom trees and so on.
We have a good working system written in C# WinForms with parts done in WPF and have recently embarked on writing a custom app for the iPad that communicates through WCF with our main server hosts. We now have a very fast custom grid written in C# that compiles to Objective C through MonoTouch and also a cool interactive pie chart.
Now my boss wishes to build a version for Android and I am thinking if we shouldn't really be spending time creating a single HTML5 app that can run on both iPad and Android equivalents.
Thing is - take a grid - my grid on the iPad is fast (re-usable cells etc) - how would I create a grid from a 'dataset' type source in html5? Do I really have to go down creating lots of tags and then submitting them to the browser? Are third party widgets like jqwidgets the answer??
Thanks
This is a bit anecdotal, but my experience has been that HTML5/JavaScript are just not fast enough on mobile devices yet (in 2012) particularly if you are displaying lots of data, especially and you want fast response times with interactive features. Give it another year, and I wouldn't be surprised if this statement becomes outdated as mobile devices continue to evolve.
Mobile web development certainly has its uses currently, e.g., if you want to target the most devices with a single codebase; if you don't have enough development resources and are willing to settle for a non-native experience; if you don't have experience in the languages required for native development, etc.
Given that you already have done the work for the iPhone app, my humble opinion is that it's probably better to move forward with a native Android application -- you will get a much more responsive application for about the same amount of work at this point.
how would I create a grid from a 'dataset' type source in html5?
Depending on what the grid contains, you can do it with plain old HTML tables or with a combination of other elements styled with CSS. There are really many more considerations though-- e.g., does it need to work on small screens (e.g., phones) or just larger screens (tablets). Often, you can't really fit a whole grid on a small screen, so you end up with UIs that aren't really grids anymore. You can take a look at a mobile JavaScript framework such as jQuery Mobile to see how they've done it and maybe even consider using the framework for use in your own application.
The various JavaScript frameworks (eg. JQuery and Dojo) have mobile device-specific widgets of quite high quality. Have a look at http://dojotoolkit.org/features/mobile and http://jquerymobile.com/
How close do these get to native apps developed in ObjectiveC and Java? Not perfect but maybe good enough. You can also use a combination of native and HTML in the same app, some pages native some HTML. I'm doing that kind of thing with IBM's Worklight, but then I would, I work for IBM ;-) Irrespective of specific products I do see folks taking that approach.
In addition to portability, anoyther of the benefits of having much of the app in HTML is that updated versions can be delivered without going via an app-store - this increases agility of functional delivery.
As evidence, I'd say that a lot of Windows 8's apps are just wrapped JS/CSS/HTML, with a few APIs which Microsoft supplies to allow access to hardware/the filesystem.
I wouldn't think that they've gone so far as to make Excel 2013 JS-based...
...however, with that said, they have gone so far as to allow developers to extend their programs with applet views of the data -- those applets are all going to be built on "html5" (again with an MS-Office JS API).
It's not an easy road to go down -- people look to jQuery to be their saviour for these types of things.
This is exactly where jQuery would not be what you wanted, if you were looking to hack together a solution.
For example:
$(".table_cell").click(function () { alert(/*whatever*/); });
People think that jQuery is assigning a delegator to listen to any click on any element containing class="table_cell".
That's really not what it's doing.
It's looping through each one, and attaching an event-listener to each one, directly.
It's these little things that people miss -- people like Twitter, who didn't bother caching references to elements, because jQuery is so easy to hack things together with.
So then you have JS touching (or acting on) dozens or hundreds of individual elements, at all times.
That's not good for anyone.
jQuery isn't bad at all -- it's quite helpful, as a low-level construct to help skirt around browser differences.
Some of its plugins are also all right.
I can't guarantee that they're all high-performing answers to all things.
But some of the plugin-creators understand how to maintain a responsive and well-performing program.
Which ones are right for your exact needs? Who knows, other than you.
Will they perform perfectly, and quickly?
That depends on a lot of different things, of course.
Coming from C#, you might do to look at something like AngularJS.
Angular, itself, uses an internal version of jQuery, to tackle some of the low-level stuff that jQuery has made a solved-problem.
But it allows for data-binding, and pretty simple view templating.
Hammer.js is also a very decent gesture-tracking library.
From there, though, I'd suggest building your own framework, if you want it done the way that you want it to be done.
Nobody knows what your needs are but you, and trying to stuff things into a shoebox, because it's available, isn't always the solution, regardless of what various companies may think...
You can leave most of the node-work to Angular, you can leave the gesture-sensing to Hammer, you can pull out some other basics from jQuery-lite (the no-frills jQ installed inside of Angular, if you don't have jQ on your site), or jQ, itself...
But they're just tools and not answers.
The web can be very responsive if you cache references to elements, rather than querying for them over and over, delegate events, do large structure-changes off-DOM (on cloned-nodes, if necessary), and don't try to treat JS as a traditional inheritance-heavy language, and you remain mindful of how and when to use AJAX (number/frequency of calls versus size of data -- favour fewer calls).
I want to start a project and I am evaluating the architecture.
And now I am at point to decide the front end components.
I want to use HTML5 + Css3 + Javascript
On Javascript side I don't know what do you recommend. YUI or Backbone. I don't know how to evaluate what can be the best for me. The idea is to create a Browser web app and a Mobile app.
Do you recommend another framework for do that? Or some book, url or something that expose how to organize my front end?
This might be a bit late. But I will say this. I've looked through these so far:
Angular, Knockout, Backbone, YUI
And I read some other comments on Ember.
From what I've seen, Angular and Knockout take the same starting approach. They start out telling you how to interface with the front end. I do NOT like this. They give you a whole lot of rope to hang yourself with if you don't know how to design good architecture. Its completely up to you to build a proper MVC app with them.
From what I've seen of YUI, its EXTREMELY similar to Backbone, which is no surprise because YUI was INSPIRED by Backbone. I have spent a LOT of time looking at backbone and I'm very impressed with it. If you follow its principles and standards, it will encourage you to build a sound framework that won't leave you hanging later.
But I saw another commentor who actually actually moved from Backbone to YUI because he said YUI is more streamlined and all around better. I wouldn't be surprised if this is true. But I need to evaluate it further.
Many folks, including myself, agree that Ember, Knockback, and Angular are rather "heavy handed" in their approach. Like I said, they START with explaining how to interface with the HTML. Right out of the gate, they're wanting you to do things a certain way. This could be very problematic depending on your particular application.. OR it could make your particular application a piece of cake if it fits nicely in their approach!
My two cents!
Backbone is great for creating web apps, both for desktop and mobile. It's strongest point is that it's small and quite simple: you can actually read through the entire annotated source code. Backbone helps you structure your code in a maintainable way, which is the main benefit.
The downside of backbone is that it's not very beginner-friendly: setting up the collections, models and views can be quite challenging if you're not used to it. It also doesn't help you at all in rendering the views, which is a blessing and a curse: it's not as easy or helpful as a widget based framework, but it also doesn't get in your way, which is especially important when implementing the mobile app.
I would recommend you study the backbone todo-example ( http://documentcloud.github.com/backbone/#examples-todos ) to get an idea how the framework works.
I'm looking to implement drag & drop in MSIE (must be, a bonus for other browsers, but just "nice to have").
I'm looking at a sort of drawing package - let's say flowcharts for example. The user can drag flowchart elements from a palette and position them in the browser. When complete, I will need to know the type and position of each element, probably some other data too.
Can this be done? If so, what's the most powerful technology to do so? HTML 5? Ajax? JS? Something else?
Short version: I would recommend JQuery UI (A javascript framework), this will make your life easier. As for other components, you are free to stack it up from server-side to client-side components depending on your needs and most of the times depending on your preferences.
[update] The long version: Personally, if I would start a useful website with a back-end, I would use Java as my PL of choice since I'm familiar with it, SQL for my persistence, and make it a Web 2.0 site, like what you want to achieve which is a rich internet application (drag and drop, dynamic content, etc). I would normally make use of Java (JSP, Servlets) but use Grails framework (Groovy, GSP, Groovlets), SQL DB (like MySQL, SqlLite, etc), Ajax, HTML, CSS, Javascript (JQuery as my JS framework). Eclipse would be my IDE to program and integrate all of these components.
Some people would prefer to use Python, others PHP, some .NET, Ruby on Rails, etc. Like what I said, it is very subjective. If you already have a field of expertise, then I suggest you stick with it, but if you are starting from scratch, it's basically a choice of the easiest learning curve for you because different Programming Languages can and will satisfy your needs.
For the front-end you have Flash, Applets / JavaFX, Javascript, etc. The problems with Flash, Applets or other embedded media are 1) heavy on resources 2) compatibility, but the clear advantage is that they are more robust because you can do so much more with these technologies in arguably a smaller amount of time. But if you want to use one of these, you have to seriously think about your target audience e.g. for Flash, iPad and iPhones cannot display them at all (except if you installed the unofficial "frash" which supports a bit of flash content).
I believe what you want to do is highly feasible even if you just use Javascript, and again, I will strongly recommend that you use a framework that can readily satisfy your needs (like drag and drop) so that 1) you'd worry less about cross-browser compatibilities, 2) you won't have to reimplement them and 3) fix many unexpected bugs along the way. But this is the general idea if you are developing a software, if the framework or library already exists, use it (just be extra careful with licensing though but this is another topic) :)
disclaimer: rum + coke = awesome
use javascript, that's all you should need to have drag n drop for elements. for example : http://flowchart.com/demo/
Does anybody know of any pre-canned gadget/widget management framework (along the lines of iGoogle etc) that I would be able to use on an ASP.NET MVC site (presumably loading divs via jQuery etc)?
In particular, I'd rather not write all the selection / location code if there is something decent already available. (I would expect to write the actual widgets / content etc myself...)
I was waiting to see if you got an answer on this one as it's something I'm interested in too. As you haven't, I'll tell you what I know (it's probably not so useful but it might get you started...)
I've used something based on the ExtJS portal demo in a previous project - there are some license costs involved depending on the deployment scenario though, and besides, it turned out to be quite slow and cumbersome, and rather tricky to customise - the default for the ext toolset is for the ui to be built entirely from javascript, not from markup, and while it was possible to coerce it into working on top of existing markup, it seemed more difficult than it needed to be. That aside, it worked well in the end, and with the paid version the support is very good.
I've also implemented a widget / portal screen based on jquery-ui sortable which worked really well - the basic implementation was very quick and easy but writing the code to save and load portal settings took more time than I would have liked.
If I were doing a similar project now, I think I'd evaluate this instead - it looks ok from a cursory glance and it's open source - it's built with jquery-ui sortable, so the core should be solid enough, and the slightly uneven animations on the demo version should be easy to sort out assuming it uses the standard jquery-ui sortable options. It has functionality to load/save portal settings too by the looks of it, so it should mean less hand coding that side of things.
I have used Telerik RadDock in the past and found it to be pretty good. It renders in divs and is relatively easy to style.
It doesn't cost too much if you are using it commercially.
http://demos.telerik.com/aspnet-ajax/dock/examples/overview/defaultcs.aspx
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
This guy put together a great tutorial on implementing a iGoogle like drag/drop widget interface. Even links to a working example.