Steps to upgrade whole UI or Redo whole UI - user-interface

I have an old web application (in asp.net) of almost 100 pages which is compatible to IE 6 so I want to revamp it's UI because it gives browser compatibility issues and doesn't look cool either. Now I am confused what things should I use and in what order to save time and avoid any error/flaw. Here are some questions:
1) I am thinking of using HTML 5 and make it responsive
2) I also heard of Angular JS, should I use it, if yes then where ?In my project java script and jquery both are used.
3) Should I use MVC ? But I am afraid it will require change of code which will lead to wastage of time. But it will make website faster.

Using MVC would surely speed up UI changes in future - all UI-related code would be separated in view part of code. If you can afford redesigning your code (it's gonna take some time), it's probably worth that, considering future maintenance.
If you want to create a good, responsive UI, according to modern standards - maybe have a look at Bootstrap (http://getbootstrap.com/) framework, or similar solutions (such as Foundation - http://foundation.zurb.com/)

Related

Joomla versus CodeIgniter/YII

A partner has a website that needs to be rebuild from scratch as it simply can't cope with the large number of visitors (currently build using SilverStripe). The site should be able to deal with 5 million or more members using 20+ languages.
We were considering using CodeIgniter or YII because from research both appear to be excellent performers. However several people advised that we should consider the latest version of Joomla for this. For small websites we are happy to use Joomla but for a heavy load website our feeling says that we have to stay away from that. We are however not able to find any comparison between both from a performance point of view but we do require good arguments why Joomla would or would not at all be a good candidate for this. One comparison can be found here: http://vschart.com/compare/yii/vs/joomla/vs/codeigniter however this doens't tell me what to expect when the number of visitors is really high.
Can some advise how Joomla compares to CodeIngitor or YII considering that the site will receive a very high number of vistors and will use a 20+ languages (for silverstripe we build a translator module as the build in CMS was not usefull when using so many translators).
When you're dealing with a site of that scale, it's probably best not to shift to Joomla. Joomla can handle a fair bit, but I'd suggest that it would be far easier to have a Joomla site that large when the site has been adapting as the traffic increases.
Part of what makes your question hard to answer is that we don't know much about what your current site does.
Is it mainly a CMS? If so, Drupal may be a decent fit for you.
Is it a custom web application? It sounds like it could be, based on the number of translations you're handling.
Is it somewhere in-between? This could also be what you're dealing with.
If you're looking at either of the bottom two options, yes, shifting away from SilverStripe (but not to Joomla) sounds like it might be a good thing.
Given the volume of traffic you're dealing with, it sounds like you probably already have a revenue stream and a development team. In that case, it might be worth having a few of your developers play with CodeIgniter and Yii and see what they think.
I wrote up a detailed answer to a question about what type of framework to choose a while ago, which you can look over here:
https://stackoverflow.com/questions/10095906/yii-or-zend-or-other-frameworks-under-the-following-requirements/10115678#10115678
I'm a Yii fan, having checked out a bunch of other frameworks. Regardless of which framework you use, I'd like to offer one piece of advice that I've found key on all projects I've worked on.
You want to work with objects, not data arrays
The reason for the above is that your models (and the objects they produce) can end up having your business logic built into them. Doing this makes life far, far easier in the long run. A great book on the subject, aimed at manager's and quite high-level (there is no code, although there might be a few lines of psuedo-code), is Object Technology: A Manager's Guide. I'd highly recommend it.
Framework thoughts
CakePHP
I started dabbling with CakePHP until I found out it didn't hand back objects (just arrays), at which point I ran screaming.
CodeIgniter
Looking at what CodeIgniter has for database model support, I think you would quickly hit its limitations with a site of your size, so would recommend against it. And having EllisLabs deciding to leave CodeIgniter behind (see their website for more details) is not a good sign. The signs say stay away.
Of the PHP frameworks out there, these are the ones I hear the most things about:
Symfony 2
Yii (disclosure: I work with this one daily)
Laravel
Symfony
From what I can see of it, has been a huge stimulus to the PHP community and many best practices have come out of that community. Unit testing, Composer, pushes for PSR-1/2, the ideal of modularity of code (some of their core code is ending up in Drupal 8) are all great things that have spurred the PHP community into writing code that's better than spaghetti code. With that said, it feels kind of heavy and enterprise-y and looked to have a pretty heavy learning curve.
Yii
When I was looking for a framework, I had a lot of legacy code that needed migration. Yii's way of handling things, although opinionated at times, has done a lot for me as far as exposing me to good practices that are used heavily on the web. Highly recommended as well.
Laravel
When I was looking for a framework (2+ years ago), Laravel didn't exist. It's apparently quite slick and cutting edge (haven't looked at it yet, I've been busy landing new work regularly in the Yii world), but I am interested in dabbling with it. That said, here's a thoughtful article about Laravel and couple of considerations that I've wondered about.
The main developer, Taylor Ortwell, seemed to be a dominant force. That's a great thing while he's making money doing this and enjoying it. Not sure what would happen to the framework if he decided to do something else.
The speed of development on the framework is an awesome thing and means that all sorts of creative juices are flowing. It's a great place to go look at cool new things. That said, you're going to want your developers to be able to easily find information about the framework they're working with, which in 3-6 months may be severely out of date in the Laravel community. The Ruby on Rails community has the same type of good/bad problem when I've looked around over there; there is so much information about the new stuff that sometimes it's hard to find information about the version of the framework you're dealing with.
That said, there are lots of cool choices out there :-) I should probably wrap up, as this has gone on far longer than I'd intended. Let us know what you end up deciding and how it ends up going.
How big is the site really? Bigger than joomla.org?
Are you talking about big in terms of the amount of content in the database or in terms of the number of visitors.
Joomla really does not have problems with scale unless you are on an older version of MySQL in which case it slows down.
It depends on what kind of application you want.
If you want a CMS, Joomla is the way to go. Because this is what it was build for.
If you are about to create a real "custom" application Yii/Codeigniter is the way to go. (This is what yii was build for)
Regarding performance, from my expericnece Yii is a lot faster, because it comes with way less overhead. You can build the application just as you need it.
Well it's like compare green and salty. Really joomla is CMS, and Yii and CI are frameworks. If you considering make highload on joomla - it's not your job.
If you have high frontend load - maybe watch on js frameworks? Yii+backbone.js or ext.js for frontend is awesome, since you'll move alot to clientside.
CI is dead. I honestly like it, but its dead already. No extensions, no namespaces in future, nothing.
I can say + of Yii:
*faster then CI;
*have great documentation and wiki articles;
*have great and active community and developers;
What else i can add? Active record is good for small databases, but not usable for highloads. Also as i said on yii you can easily make js framework+yii composition. Yii have good caching system. Long time support of stable versions.
I personally manage highload now, but its more backend/api/database. 150+ thousands database records daily, 300+ thousands requests to api, 50 milions records data table. It works like a clock for more then 2 months already.
Choose what you like, or write on native php if its really big system - best choice from practice.
Joomla is an award-winning content management system (CMS), which
enables you to build Web sites and powerful online applications. Many
aspects, including its ease-of-use and extensibility, have made Joomla
the most popular Web site software available. Best of all, Joomla is
an open source solution that is freely available to everyone.
CodeIgniter is an Application Development Framework - a toolkit - for
people who build web sites using PHP. Its goal is to enable you to
develop projects much faster than you could if you were writing code
from scratch, by providing a rich set of libraries for commonly needed
tasks, as well as a simple interface and logical structure to access
these libraries. CodeIgniter lets you creatively focus on your project
by minimizing the amount of code needed for a given task.
Yii is a free, open-source Web application development framework
written in PHP5 that promotes clean, DRY design and encourages rapid
development. It works to streamline your application development and
helps to ensure an extremely efficient, extensible, and maintainable
end product.
Joomla can't compare with CodeIgniter / Yii. But, If you need any CMS for your project, you can use Joomla (or maybe Wordpress). If you want to create any web application, then you need to decide for any PHP Framework. I use CodeIgniter for years, and I like it. They have a huge community, and the best user guide. Yii also has a great community and a lot of features. So, you can decide depending on you demand.

GWT for large scale applications

I've heard the Google Web Toolkit isn't that good for web sites with more than 5 pages and a common layout. Is that true? We have at least a 100 subpages and a common layout defined in CSSes. Today were using PHP but we will move to a Java front either Spring MVC or GWT. We're using som jQuery AJAX and other jQuery components like a jqGrid. We also have some .swf-films and fusion charts. Will opting for Spring combined with GWT be a good choice or is Spring MVC with a jQuery library a better choice for us?
It's not true now. Earlier GWT versions really had some issues with scalability (e.g. problems with JS code size in IE - http://code.google.com/p/google-web-toolkit/issues/detail?id=1440), but since GWT 2.0 you have no limitations here.
Moreover, latest GWT versions support functionality for splitting projects to the parts that may be loaded dynamically when they're needed. Please refer to https://developers.google.com/web-toolkit/doc/latest/DevGuideCodeSplitting to learn how it works.
Take into account also that since Spring is Java, you have possibility to share classes between server- and client-side. Plus Java has very good support in IDE - all kind of refactoring will be available for you (it is not so convenient in case you use jQuery).
So Spring+GWT looks more preferable choice.
GWT is not a universal framework for building just a any webapp from scratch. It is very useful when you have a lot of complicated logic on client side, (image editing, real time collaboration, diagram drawing, games , complex reports building and etc etc). But all of this can be done without GWT.
GWT can be used when:
your team hates/dislikes JS (and is unable to build nothing complex with JS, just because they hate JS)
your team is quite experienced with Java
your team understand how all this browser related stuff works (HTTP, JS, DOM , CSS and etc)
in this project there are will be a lot of logic running on client side
I've seen quite a few big projects built completely with GWT. Some of them should never used GWT, because the were no reason for them to use it in such way. For most projects it is enough to use GWT only for some part of application.
The choice depends on your team and the project you are doing. If your team can't really see what benefits GWT will bring to the project, then you shouldn't use GWT.
Our enterprise-level application utilizes both and we're quite happy with the results. GWT is a powerful toolkit which lowers development time by orders of magnitude. That said, there are still things that GWT either doesn't handle all too well or just plain isn't suited for (and that's ok... that's why Spring MVC lives nearby). We have GWT-RPC hitting Spring services directly and it works incredibly well.
Our project though is a true webapp, not a website. We use a unified design which spans all "pages" (using a DockLayoutPanel and swapping out just the center makes this super easy).
IMO, whoever told you that GWT isn't good for consistent design across numerous "pages" is nuts...
I think any assertion that GWT (or any other method) lowers development time by an order of magnitude has already been debunked by Frederic Brooks in a time when shoulder pads and Jan Hammer's synthesizer were fashionable: http://en.wikipedia.org/wiki/No_Silver_Bullet.
But seriously, if you're a PHP shop, moving to 100% Java would be a huge investment, and not to be taken lightly.
On my experience of GWT, my only bad experience was with GWT compilation slowness due to lot's of permutations. Our application had more than 20 languages to support, which multiplied by 6 for browsers specific result in 120 permutations, which proved to get horrible performance.
But this is not a real bug issue, because you'll mainly use the dev mode, with instant code update, and you can have special compilation unit with reduced set of browser and language (even one language and one browser => one permutation if you wish).
So in my case, using Jenkins we made the big prod target full build nightly, deploying on a QA platform so that the QA team test every browser language combination. And on every commit a reduced build (1 browser and 2 languages in our case) was deployed on a dev validation platform.
GWT is definitively a great tool for large app. ;)

Should I use SmartGWT or Vaadin?

I'm going to develop a web application using SmartGWT. I've heard about Vaadin framework. I wonder what is the best to use?
My application will be used by ~500 users at the same time. And I need high response performance and high security control. I won't need dozen of pretty widget just enough to be able to use pretty tabbed pane and table. So what is the best choice regarding my needs?
Edit :
I'll also need a tool to export table content to Excel format (like in Google Doc SpreadSheet).
ps : already check this one Should I use Vaadin Framework
I looked into both these frameworks, and others, and decided to go with the core GWT widgets. You desire to have high response performance will be difficult with Vaadin since it sends almost everything back to the server. And if you don't need super fancy widgets then the core widgets (plus some incubator/3rd party ones as needed) should be fine. I didn't get deep into testing SmartGWT, but it seemed to really tie you into their framework (making it difficult to use core widgets as well) and I read about difficulties when starting to do things different than the showcase examples.
Good luck!
If you write your Vaadin application properly, it will be performing perfectly well (check this one: https://vaadin.com/wiki/-/wiki/Main/Optimizing%20Sluggish%20UI).
If you know SmartGWT, use it. Also, if you have no experience with Vaadin, use SmartGWT. It might take you a lot of time to learn Vaadin (it requires some practice after one is able to create well performing application). The biggest problem of Vaadin that it is very easy to write slow application - because everything seems to be so easy and one tends to use many components and so on...

Which JavaScript framework to develop a client-side complex UI? Dojo, SproutCore, Cappuccino

I have been using Dojo and Dijit for more than a year to develop a browser-based IDE. Dojo is a great framework. But creating an IDE-like interface using Dojo is cumbersome and wastes a lot of time unless you are a CSS superman. I have a good understanding of HTML5, JavaScript, and CSS. Building the UI I needed required several CSS hacking that I found by trial and error. There was no systematic way to get from the UI design to the implementation and I am afraid to change the UI layout because any simple change can break the UI, mostly by adding irrelevant scroll-bars to Dijit panes where I do not need them. (the complex UI has 4-5 levels of nested panes including mostly border containers and content panes)
Recently I have come across SproutCore and Cappuccino, which have great demoes and their look and feel is more desktop-based. There has been several discussions comparing these two with each other. But none of them talk about how systematic and quick is it to get from UI design to implementation? Ideally, I should be able to implement the UI I want not more than a couple of days (Assuming that I know the framework), and changing them in the future should be easy.
The other difficulty with Dojo is that I have to work directly with DOM, to append and remove dijit widgets. While I do like to keep this flexibility, I wish I could use a higher level of abstraction to define the application UI. I have read about MVC in SproutCore and Cappuccino, but I am wondering if in practice the provided abstraction layer speeds up the UI development? or the provided layer is a fancy architecture that only increases the readability of the code? Will I lose the direct access to DOM if I build my UI using these abstractions?
Cheers,
Navid
Cappuccino is much higher-level. You write in Objective-J, not HTML/CSS/JavaScript. I personally do not recommend it as Objective-J is a niche language and you'd be stuck with something not widely-understood by everybody. You'll find it more difficult to look for answers to problems, and other people will have more difficulty in maintaining your code.
However, due to it being high level, it does shield you from the drudgery of programming in "standards" (i.e. HTML/CSS/JavaScript). Therefore, you should be able to develop UI's faster and easier, but you'll have to instead learn the ins-and-outs of Objective-J. All-in-all, not much to gain here, I suppose.
SproutCore, on the other hand, is HTML/CSS/JavaScript based, so you don't really have to relearn the basics. It follows the MVC model of separating UI and data concerns, so programming UI's should be easier.
My personal recommendation is to stick with Dojo -- 1.6 has come out, which has change-tracking, state-tracking and bining support. 1.7 is around the corner. The MVC module is improving fast. The next version, 2.0, will be quite awesome. It is being actively developed on, and so you won't be left behind.
Dojo can also be used with the Closure Compiler's Advanced Mode to make highly-compact, highly-optimized, fully-obfuscated builds for deployment. Other JavaScript-based frameworks are not as adaptable.
Cappuccino most definitely goes beyond just improving readability. If you don't want something to have a scrollbar in Cappuccino, don't give it one. That's pretty much the end of the story and one of the great advantages of using such a framework. In my experience, HTML and CSS is just an endless troubleshooting session. With Cappuccino things go where you say they should and stay there. And this is true across browsers as well (most of the time).
Furthermore you can, if you choose to, build your user interface using Interface Builder and Cappuccino's nib2cib utility. This makes it trivial both to initially lay out and to then later shuffle buttons and controls around.
Have you considered jQuery and the jQuery UI?

Graceful degradation - when to consider

When designing and building the UI for an application that uses AJAX, when do you consider graceful degradation (for users who have JavaScript disabled, or are using a screen reader)?
At the end, once the AJAX version of the site is completely finished
At every stage of development
I don't
Something else...
These days, progressive enhancement is generally preferred over graceful degradation - i.e. the exact opposite approach.
The method I'm employing so far is to write it so it works without JavaScript and then add the JavaScript on top.
It's really the reverse of graceful degradation. It's an emphasis on enhancing the page as your browser and settings allow.
Relevant article
Graceful degradation can describe two things:
It is a behaviour (normally a website or web application) that allows the site to continue functioning when certain features are disabled (e.g., JavaScript; CSS).
It is an approach that builds the application to work with bells and whistles turned on, and then afterwards fixes are bolted on to make it work without said noisemakers.
I assume you are asking whether or not to use the latter to achieve the former. I'd definitely suggest achieving 1), as anyone who browses with JavaScript off (i.e., lots of people with a computing clue; those using text-based browsers; those using disability aids) will otherwise not be able to use your site.
As for how to do it, A List Apart have a great article on progressive enhancement which is worth looking at, where you build the site to work basically first, and then you add the AJAX, etc. afterwards. I prefer this approach because it gives the app a solid foundation to work on, with decent security and functionality from the word go. Future enhancements to it can be made at the basic level and then added into the AJAX layer; without the former, it's harder to add in gracefully degrading components to the application in the future.
Anyway, enjoy the article and if you want to know more about this stuff generally, A List Apart is a great site!
Jeremy Keith sums up the argument for progressive enhancement with his Hijax article.
Typically, I use the following code to dynamically apply a class of "js" to the HTML element to target JavaScript-enabled browsers
<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>

Resources