We developed an application 15 years ago with .NET.
Right now we are thinking about recoding it.
Our ideal requeriments are:
1. Multiplatform: tablet and PC (Mac, Linux, Windows)
2. Hosted at our own server so we could sell the application as a SAAS
3. Develop some parts of the application for mobile devices
4. Use of third party components: datagrid, appointment schedule, graphical charts.
We think we should focus our efforts on web tecnnologies because:
One language for all platforms, even we could use some of our code for requirement 3 using a responsive web design, so we have requirements 1,2,3 out of the box.
Our favourite development tool would be extjs because of the components it provides (requirment 4).
But our big problem is.... we are not sure we could a graphical part of our application with html5/extjs:
There are 40 images we should import, ideally svg because the user should interact with them (click, drag and drop) so some other images could render inside the original ones, as layers.
For each image we can draw from 0 to 20 images over it, and whatever combination of them is possible so the total number of images could be huge without layers.
Any framework we could use? Maybe raphaeljs? Any example with layers? Tutorial examples are too simple and we're not sure about performance issues.
Maybe another option could be C# & mono? Basic knowledge about C# or WPF in our team but not with mono or implementint it as a SAAS. Maybe we could use xamarin?
Requirement4 could be implemented using a Telerik control or similar but we have no idea about compatibility issues (requirement 1).
Maybe we are too ambitious?
Ext JS 4 supports SVG drawing out of the box: see Ext.draw.Component.
Related
I'm a big fan of Zurb Foundation. They just released Zurb Foundation 4 which was redesigned to be mobile first. I'm fairly new to responsive design taking into account both mobile, tablet, and traditional desktop experiences. I'm trying to wrap my head around how best to manage my site's content for these different devices. With Zurb Foundation 4, you can hide or show content based on small, medium, or large device sizes. So, it seems with Zurb's approach you drop all of the content down to the device and let the CSS decide what content to show depending on device (this is responsive design).
My question is why do we have to drop all of the content to the device? That seems like a waste of processing on the server, a waste of bandwidth, a slower experience as the browser handles the content some of which may never be shown to the user because of the device they are using. Am I missing something? Wouldn't it be better to go back to the server and let it send content to the client that's appropriate for the device type? Shouldn't we be concerned about mobile user's data plans and not send down content that's not appropriate for their device type? All the examples that I've seen on responsive design has content for desktop and mobile/tablet downloaded to the client which seems to be a waste.
I'm developing a time entry application that has a different user experience based on the device type. Desktops (when in full screen) have a more detailed data entry experience whereas mobile/tablets have a different experience because of device real estate is smaller. I'm developing the app so when the desktop browser is resized to something smaller that 768px wide that jQuery makes a call to the server to swap out the UI for the "smaller" mobile/tablet version. Is this appropriate? I certainly do not want to download 2 versions of the app and hide one or the other depending on the device width.
Am I on the right track with my jQuery approach? Am I missing something regarding responsive design and needing to tailor the content to the device? Any ideas, suggestions, and guidance is appreciated. Thanks.
Mobile First with Zurb Foundation is basically a philosophy change by the Zurb team and if you want do develop a responsive site and not take a Mobile First approach then I suggest using Foundation 3 which is still available and fantastic. There is a book that I am reading that gives a great pitch for Mobile First, called Mobile First by Luke Wroblewski who is also listed as an adviser to Zurb.
here is an article by the same author that might be interesting:
http://www.netmagazine.com/interviews/luke-wroblewski-mobile-first
Basically: the premise is that you start your development and design for a mobile, meaning basically an iOS or Android style browser and then add features.
So instead of starting with a desktop / tablet experience and removing things as was commonly done with .hide classes in foundation 3 and could still be implemented in this way with foundation 4, they suggest using .show classes to add additional content.
This can be taken way further by using Compass and Sass Mixins. There isn't a lot of great documentation on how to do this, but you can basically keep your markup semantic, apply an id rather than a class and use the mixins to apply it to that id. There are advantages here in speed traversing the dom for an id vs. a class so it can be a good way to go.
Note: foundation 4 is using the drop in replacement (there are some limitations) for jQuery called Zepto. You can replace Zepto with jQuery if you really need it in foundation 4 or use foundation 3 instead. Zepto is much more lightweight and thus suited well for mobile.
As for it being faster by using jQuery to async load the data (I am assuming) based on the size of the browser, that is one way to do it. I am not sure if you are going to have a huge speed increase here. There are many strategies, pagination, async loading more data on the fly, and it depends on how you arrange the UX / UI around that data.
There are also many other issues such as caching resources, CDN, etc. that are typical in front end engineering that might give a faster load time. One resource you can check out related to this is ySlow.
There are also many design patterns such as off canvas slides, the 3 line (hamburger menu), loading more data on scroll, stateless apps, that can allow you to have the same functionality in a mobile app. If you go stateless, after the initial page load other pages should appear to be almost instantaneous.
I think the question here is more philosophical, in do you need all of the features, which is one thing that I believe taking a Mobile First approach is trying to approach.
Another thing to think about is the perceived loading time. I think I read about this is Seductive UX (another great read) but the faster you can get the page up with a loader or spinner, the faster it is perceived to be loading, even when in actuality it can be loading slower.
As a final note, if you plan on using foundation, you might look into using jQuery/Zepto with Modernizr to pull from the same media queries foundation is using. That way you don't duplicate or create something that is inconsistent with the rest of the responsiveness.
I'm developing the app so when the desktop browser is resized to something smaller that 768px wide that jQuery makes a call to the server to swap out the UI for the "smaller" mobile/tablet version. Is this appropriate?
It doesn't sound like a good approach do you take orientationChange in to account?
I certainly do not want to download 2 versions of the app and hide one or the other depending on the device width.
If you are on most tablets visiting the website in portrait and change to landscape you'll have to download the >768px UI after already downloading the <768px UI.
The mobile first approach in zb4 (with media queries) allow you to prevent stuff that belongs to big devices to be downloaded in to small devices. Basically you start with mobile styles and if the device meets the conditions you set on your mediaqueries (you can have much more breakpoints than the zf4 framework gives you by default) then the next rule jumps in.
I have worked in several 'responsive' projects even back in the pre-mediaqueries days were I use javascript to measure windowsize
Regarding javascript and like #powjames3 said zepto is much lighter / faster than jquery and if you could write your own javacript functions will be much better than using a over-bloated library.
Nowadays I do mobileFirst responsive webapps and websites use a mix of user agent sniffing ( sometimes to decide what image src or script / style src to deliver), despite the decision of the user agent tests i always serve mobile first mediaqueries, and conditionally loaded content.
"As Ethan Marcote (and John Allsopp before him), were right to point out, the inherent flexibility of the web is a feature, not a bug."
Here are some resources that might put you in the right track:
User agent parse and detection:http://mobiledetect.net/
Tutorial http://www.html5rocks.com/en/mobile/responsivedesign/ that covers:
Why we need to create mobile-first, responsive, adaptive experiences
How to structure HTML for an adaptive site in order to optimize performance and - prioritize flexibility
How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units
How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation
What we could do to further enhance our adaptive experience
Hope it helps
I'm trying to bootstrap a Rich Internet Application, which will have a complex canvas (think: Visio), and should work according to these principles:
it would run in a browser
it would run on a tablet (Android or other)
supports complex drawing, drag & drop etc.
runs on its own (eg. without a server component) happily
can leverage conventional & touch UI as needed - user can draw a line with a mouse or using the touchscreen
I was thinking about using a Javascript framework and found ExtJS, whose demos I quite like and checking the API docs it seems it supports all the low level GUI stuff I need (think: Ext.draw package, especially Ext.draw.Sprite).
But then I also found Sencha Touch, which seems to be leveraging the same technology stack, only for the mobile. However the API is much more limited (no Ext.draw available), and only runs in Webkit browsers, as far as I can understand. But it supports touch-based interaction.
Is there a way to create an app that works in a browser but can also be "compiled" to native mobile/tablet code (eg. with PhoneGap)? Or is this just a dream and these two cannot mix at the moment?
PS. checked the other similar questions but they seem to be quite out of date.
Short answer: it is currently just a dream I'm afraid.
Long answer: Sencha Touch and ExtJS share a lot of underlying logic and are somewhat similar, but I would say you'd only be able to reuse 50% of your code, at most, when trying to port one to the other.
jQuery Mobile and jQuery UI share similar issues at the moment - they have both created nice mobile UI frameworks, which only support webkit browsers, meaning there's no easy way of developing rich apps that run in desktops and on mobile platforms. Hopefully these projects will merge their mobile and desktop frameworks at some point in the future to allow us to create apps that can be deployed across both without a massive rewrite. There will always be differences in the way mouse and touch screen events work but I wish that was the only thing we had to consider.
Extjs is for desktop application, while Sencha touch & touch charts are for mobile, eg. tablet or Android.
#JunkMyFunk is right, you'd only be able to reuse 50% of your code at most.
The definition of class is not the same between Extjs and sencha touch which means currently you can't mix Extjs with sencha touch, the namespace will conflict if you do that way.
We are working on a Mind map based webapp as our final year college project. It will be a website where users will be able to create mind maps collaboratively. The user interface will be very similar to what https://bubbl.us/beta/ and hxxp://www.mindmeister.com/ have.
In a nutshell, the users will have access to whiteboard and drawing tools to create mind maps on a whiteboard. The changes made by one user will be visible to other session users. e.g. A session has three users A, B and C. If A changes mind map, it will be visible on whiteboards of B and C.
We were considering Flex, Openlaszlo few days ago but having limited time (about 3 months) for project completion, we binned those. For Flex we will have to learn Actionscript3 and for Openlaszlo there is no IDE support. So both of them won't be good choices.
We have shortlisted Silverlight and Vaadin frameworks as viable choices but we are confused as we don't have any experience with either of them. We need to take these points into consideration while selecting a framework:
Time frame for project - about 3 months, give or take 2-3 weeks
Learning curve for framework - should be easy (Very relative term indeed..In the context, we are familiar with VB6, PHP, Javascript and Core Java)
Necessary graphics related features supported - such as whiteboard, drag-drop widgets, animations(need not be fancy stuff) etc.
Availability of tutorials and good documentation
There are 2 open source mind mapping applications that can be useful for this webapp.
Silverlight - hxxp://silverdraw.codeplex.com/ (a webapp) - More like a POC design.
Java - hxxp://www.xmind.net/ (a desktop app) - Most of the mindmapping features we need are present. If we use Vaadin, we can re-use some code which is a huge plus point.
We are open to other suitable frameworks. Which framework would you choose?
P.S.: Excuse for obscure URLs'. New users are limited to only one hyperlink.
Disclaimer: I'm a member of the Vaadin Team, and do not know Silverlight very well.
I believe both Silverlight and Vaadin would be good candidates for your application, and for both the biggest challenge will be the client-side implementation of the visual mind-map component.
I took a quick look at XMind and it seems to be Swing based, so I'm afraid that the only way to re-use that would be to wrap the mapping component into an applet. You can easily do this with Vaadin, but it will require the Java plugin in the browser.
If you consider implementing the mindmap component without plugins, you have the following options:
Use the Vaadin core components (eg. the Tree, live example here) to visualize the mind map. Vaadin supports drag & drop, so this would be very fast to implement, and you would need to work with only server side Java stuff.
Create a HTML5 component with Vaadin integration for the mind-map. You can do this with the HTML5 canvas, and wrapping it in a Vaadin component is easy, but it'll require that you code the component with GWT. There are several examples on how to manipulate the canvas with Vaadin and GWT.
Create a SVG component with Vaadin integration for the mind-map. As far as I know SVG supports interactive stuff a little better than Canvas, and there are examples on how to interact with SVG using GWT and Vaadin. Note that the support for SVG is lacking especially with the older IE versions.
All of these options are feasible to implement within your timeframe (depending on what extra functionality you want). The first option is by far the easiest to do, but it might not be fancy enough for your requirements.
We have strived to make Vaadin as easy to learn and use as possible, and I daresay that our documentation is very good. In addition we have a very lively community filled with helpful experts. If you need more information on Vaadin just come over to our forums and we'll help you out.
You are kind off answering your own question. Use vaadin it will be a little extra work but then your saving huge amount of time on the mindmap coding.
The web based application I am working on currently is a port from a windows application. This application is very data intensive. There are scores of modules and each of these modules have number of forms (data entry screens) and reports whereas the forms have many many fields and likewise the reports.
I have been trying to identify the most suitable architecture for the presentation tier. There are many functions that are not very easily portable, for example printing (this too is very complex). For most of the others, I am planning to us "Ext JS" library which looks like capable of handling about 70% of complexity out of the box while for the remaining I would be custom coding or extending Ext JS.
Having said that (sorry for being so descriptive), I wonder, if this is an Intranet application, why not port the entire application to SilverLight? While I am good at .Net, I'm somewhat alien to SilverLight. Considering I know my target audience and that the software will be used per seat license, would it be better to ride on SilverLight or is it better to stick to conventional web (XHTML, JS, CSS, etc)? Further, I have to support multiple devices in future and considering that SilverLight plug-ins for many devices are yet not out, would it be a risk?
IMO, if you are developing a web application, then yes, develop it as an RIA.
The choice of technology is up to you. I prefer jQuery and have never used ExtJS. But I've taken a look at it, and if your aplication is a port of a windows application and has a lot of conventional UI elements like forms, input boxes, toolbars, menus, button etc, then go for ExtJS.
As for some controls that are not available in ExtJS, you can easily extend ExtJS.
Regarding .NET: ExtJS is completely server-technology agnostic, so you can develop your application in .NET and still use an ExtJS UI. In fact, I would prefer to do such an implementation.
Regarding Silverlight: I am slightly against using silverlight, primarily because it requires a plugin to be installed that is not available on all platforms. But since your application is an intranet application, your user base will be in your control. But you should make sure that any future decision regarding the workstation platform will not affect your application's working.
Cheers
Whether to use Silverlight over HTML/JS etc. in this case would depend on 2 key factors.
What are you familar with already
What type and range of devices you need to reach.
If you are already comfortable with HTML + ExtJS then that has to be huge pro in its favor.
The range of devices that Silverlight is possibly going to be available (Windows Phone 7 for example as well as Moonlight, I've even heard that there may be port for Andriod and Symbian) is growing. However its really early days for that and not all may materialise in a form useful to you.
Having said that it should be acknowledged that a UI designed for use on desktop does not work well on a small device. Hence you would need to develop some task specific UI for other devices regardless of the technology you use. This in turn means that there is no reason for you to try to stick with single technology for all devices.
I think you should look very carefully into WCF, REST and OData first. Good layering of the application into useful models using these would more easily enable the use of a variety of front-end technologies for the client.
If you are into .NET and other Microsoft tech then you should seriously consider using JQuery and ASP.NET MVC as another potential front end technology.
I think that you need to ponder the inconveniences of a solution based solely in Silverlight. Like Flash it needs a plugin to be installed in every station, so it loses some of the premises of web applications (run everywhere with the only requirement of a browser). Besides although Silverlight has taken great advances, it is not yet a widely supported standard, and it is in control of a company who later may decide for you in very important matters regarding the platform you use, and made it outdated or useless (in the worst case).
Ext JS is a great library developed entirely in Javascript, so you can touch anything that suits your needs. If the Windows applications you are basing on is well-layered, then your work may not be that hard.
If you are an asp.net developer you could take a look on asp.net mvc, a great set of tools that implements MVC pattern to web applications using the same old C# or VB. Besides the developers behind asp.net mvc, have taken a lot of work to make it suitable to work with javascript libraries like jQuery
Happy coding!!!
I want to utilise the 3dwall feature of cooliris, the physics effects of the icons in bumtop to design an application for making the image viewing more intuitive and interactive. I dont want to use flash as it would slow down the speed for interaction on desktop. PLease could someone tell me about
choice of
1.) physics engine - physx or ODE for the physics effects like bumtop
2.) opengl or direct 3d
3.) WPF(windows presentation Format) - what is its use
Flash with Actionscript 3 is the best for such things. Checkout http://www.flashloaded.com/flashcomponents/3dwall/ for an illustration of CoolIris type application in Flash.
WPF is great for building application like this. VS2008 doesn't provide solution for good visualization,
but you can always call for help Blend included in MS Expression. There you can select silverlight project for building fancy web applications (silverlight.net/showcase). At start, combining different controls and trigger events to start simulations is entirely included. Yes, inside Blend you can set frame keys like in flash.
It's certainly a lots of effort, but it don't need to be. Recently new set of WIN RadControls for WinForms and Silverlight are issued and they look, believe me, excellent. You can look for Run Demo program which shows example of using these controls. Under section Integration, Carousel and others you will see what you looking for and beyound.