RIA Technologies Comparison

Transcription

1 RIA Technologies Comparison

2 Focus Since the subject is huge I will first present a general view and then focus on more ( hopefully ) interesting parts Also, some key points need to be established: Technologies Frameworks based on technologies

3 Technologies/ Frameworks

4 The Plug-In Model A more flexible approach to extending browser functionality than single function plugins is to provide a plugin which acts as a separate runtime. Application code can be written that targets the plugin runtime providing an alternative to HTML / JavaScript technologies for web application development.

5 The Plug-In Model This is the approach that was used to bring Java applications to the web, with a Java Virtual Machine plugin providing the runtime for Java Applets. This is also the approach used by the Flash and Silverlight plugins, each providing a runtime for their native content.

6 The Plug-In Model The biggest advantage of the plugin model is that it gives the plugin developers a sandbox free from the browser itself. Free from the constraints of web standards Issues of cross-browser standards support. Allowing plugins to provide much more power than the HTML page that hosts them.

7 The Plug-In Model But Plugins need to be downloaded by the end user. Plugins create islands of interactivity within a HTML / JavaScript page They have an associated load-time; HTML is much more immediate. In portal applications, JavaScript is still needed to interact with the rest of the page

8 RIA Technology Timeline April, 2010 Silverlight 1 (WPF/E ) Silverlight 3 Silverlight 5

9 JavaFx JavaFX Script is a very powerful language supporting JSON format, it is expresive and easy to use. Can easily get very nice effects JavaFX is basically a nicer way to write applets Like original Java Applets, fails in deployment, acutually inhereted all of the original applets problems

10 JavaFx First the JavaFx plug-in is needed ( But so is for Flash & Silverlight ) Then, for quite along time there is a loading notification Many times it does not load and it is possible to know what has happened only via the Java Console, and that too, would be meaningfull for developers only. Failed to gain popularity

11 Silverlight Silverlight technology, althought somewhat similar to Flex, has some advantages: IDE, Visual Studio.NET based language, C#, VB.NET Silverlight 2 integrates very well with other Enterprise Microsoft.NET based technologies, WCF, LINQ

12 Silverlight Silverlight is a relatively complex framework when compared to other.net technologies such as Windows Forms and has not matured to the point of having the same level of tool support for rapid application development Was plagued with problems upon release, specially memory, performance and resource consumption Microsoft is shifting away from Silverlight as a crossplatform development framework: Microsoft: HTML is the only true cross platform solution for everything, including (Apple s) ios platform

13 HTML5 HTML5 itself defines an updated standard of the previous HTML 4.01 version. By introducing additional markup and objects like <canvas>, the HTML5 itself is still the web document markup language. In the middle of this technology stack, which HTML5 term refers to, lies the updated CSS3, which now provides a additional abilities for web developers like animation, transition effects and image filters.

14 HTML5 The controlling part of this takes Javascript and its high level application libraries such as JQuery or Node.js, allowing also a complete ability to interact with backend using asynchronous data requests HTML5 still relies on the same set of HTML, CSS and JavaScript that was known for decades and more often referred as DHTML or part of Web 2.0.

15 HTML5 One of the biggest advantages that HTML5 has over Silverlight and Flex is that it does not require a plugin. This means that the user does not have to install any other software to view a HTML5 page, and also results in faster load times Out of all three technologies, HTML has the farthest potential reach, with newer form factors like mobile and tablet quickly adopting the latest HTML5 features.

16 HTML5 A webpage written in HTML is far more likely to still be useable in a decade, than one written in Flex or Silverlight. Flex and Silverlight need to bridge the technology divide to communicate with the JavaScript / HTML that forms the rest of the page. With HTML5 the application does not sit within the page, it is the page.

17 Flex Solid, extensive and mature framework. Extensive set of API for all aspects of development: Graphics, Communications, Logic, XML, etc Reliability, ability to adapt to different the screen sizes and densities Considerable community

18 Flex Technically it remains the best environment for development of Web application, but politically it became the product of the past Adobe: "In the long-term, we believe HTML5 will be the best technology for enterprise application development. We also know that, currently, Flex has clear benefits for large-scale client projects typically associated with desktop application profiles." (

19 Flex vs HTML5, Little Deeper... We will focus on comparison between the current leaders,( at least by popularity ) Flex-Plugin based, HTML5- Markup based This will be done by comparing qualities that are important in GUI development technology: Openness UI Components/ Widgets Forms and Validation Graphics: Vector, Bitmap, Video History: Back, Favorites, etc Development Testing

20 Flex vs HTML5: Openness Adobe has submitted the code for its Flash-based Flex framework to the Apache Software Foundation (ASF) to be managed as an independent project. Flash Runtime is closed, yet. Open HTML5 spec, but most browser runtimes are closed.

21 Flex vs HTML5: UI Widgets Flex provides many different built- in UI widgets (containers, lists, menus, navigators, Charts ). Additionally there are many libraries providing additional quality widgets for Flex applications, both commercial and open source

22 Flex vs HTML5: UI Widgets Flex Free Axiis ( birdeye ( )

23 Flex vs HTML5: UI Widgets Flex Commercial IBM ILOG Elixir Enterprise ( 01.ibm.com/software/integration/visualization/elixir-enterprise/)

24 Flex vs HTML5: UI Widgets HTML5 HTML5 is a spec,therefore depends on browser implementation of it s tags Adds several presentation/ structure tags: section aside hgroup header footer nav figure video and audio for multimedia content. canvas and more

25 Flex vs HTML5: UI Widgets HTML5

26 Flex vs HTML5: UI Widgets HTML5 JavaScript Libraries with various components

27 Flex vs HTML5: UI Widgets HTML5 Prototype ( Flotr ( 52Framework

28 Flex vs HTML5: UI Widgets HTML5 Ext JS 4.1 (

29 Flex vs HTML5: Forms HTML5 brings some big improvements, both for the developers creating forms and for the users filling them out. New form elements, attributes, input types, browser-based validation, CSS3 styling techniques, and the FormData object make it easier to create forms.

30 Flex vs HTML5: Forms HTML5 forms support validation, by requered attribute and pattern validation ( , url )

31 Flex vs HTML5: Forms; Flex Forms and Validation Flex 4 has extensive support for forms and validation where it is also, possible to define custom validation ( Using, for example back-end query )

32 Flex vs HTML5: Vector Graphics Vector graphics means drawing lines and shapes of different styles. Flash has always had graphics as its focus and it remains it s strong point HTML used various incompatible specs like SVG and VML. Finally, HTML5 introduces the canvas element which gives us fast vector graphics. Along with elements like inline SVG

33 Flex vs HTML5:Bitmap Manipulation Flex lets you change the individual pixels, or easily apply different filters, effects, and transforms. Canvas only gives you raw pixel access, bit map manipulation is possible but harder

34 Flex vs HTML5: Video Flash has always been the obvious choice for displaying videos on the web, YouTube is the big example of that and Flex makes it even easier with more controls. HTML5 introduces native browser support for videos via a video tag

35 Flex vs HTML5:History HTML5, like previous versions support browser back button History API, new in HTML5: Allows manually to add a value to the history stack without making the browser load any new page. Capture navigation in case we want to change some content when it changes

36 Flex vs HTML5:History Flex4 can support browser back button, although this is not trivial and requires JavaScript libraries that are part of Flex SDK distribution

37 Flex vs HTML5:Communication/Real-time WebWorkers API: defines an API for running scripts in the background independently of any user interface scripts. ( Like BackgroundWorker in WinForms 2.0 )

38 Flex vs HTML5:Communication/Real-time WebSockets Uses WebSocket protocol instead of HTTP True full-duplex communication channel Both UTF-8 strings and binary frames can be sent in any direction at the same time Server Implementations: Jetty WebSocketServlet phpwebsockets mod_pywebsocket

39 Flex vs HTML5:Communication/Realtime HTTPService: Any kind of server-side technology, including PHP pages, ColdFusion Pages, Javaserver Pages (JSPs), Java servlets, Ruby on Rails, and Microsoft ASP pages. Additionally, you use HTTPService to access REST-based web services. WebService: SOAP-based web services that define their interfaces in a Web Services Description Language (WSDL)

40 Flex vs HTML5:Communication/Realtime RemoteObject: RemoteObject components use the AMF protocol to send and receive data, while WebService and HTTPService components use the HTTP protocol. AMF is significantly faster than HTTP, however server-side coding and configuration is typically more complex.

41 Flex vs HTML5:Communication/Realtime 3 rd Party server components that support AMF3: Zend Framework AMFPHP SabreAMF BlazeDS BlazeDS easily integrates with Spring to provide full backend solution

42 Flex vs HTML5: Persistent Connections/ Push It s always been possible to do this by connecting to sockets in Flash, which is why we see so many games and collaborative apps in Flash. Flex/ LCDS/BlazeDS Provides built-in messaging There are various hacks for how to do this in HTML, such as COMET, but HTML5 makes it infinitely easier by providing native support for web sockets.

43 Flex vs HTML5: Development For Flex there is IDE like Flash Builder, IntelliJ IDEA ( Commercial ) Flash Develop ( popular with Flex developers ( Free ) Requires compilation, that in some cases may take a lot of time ( Large files, Modules ) Less intuitive programming model based of Flash objects lifecycle events ( Deferring ) Flex framework generates A LOT of code during compilation, to avoid misuse of Flex features one must understand this code witch if often not trivial

44 Flex vs HTML5: Development Flex provides a developer-designer paradigm in witch the designer actually contributes pieces of code In practice this is not yet mature enough

45 Flex vs HTML5: Development IDE: Eclipse, NetBeans (Free), IntelliJ IDEA, WebStorm ( Commercial ) New tools: Adobe Edge (), a tool for designers that is using HTML5, JavaScript CSS3 ( The designer-developer interaction is yet to be determined.

46 Flex vs HTML5: Development Does not require compilation, however it is likely that time saved on the compilation will be spend on testing during the runtime Better Web adaptability, easier implementation of full text search and mashups. The integration with other technologies will also become easier with HTML/JavaScript

47 Flex vs HTML5: Development, Component creation HTML5 presents a simpler model for creating components. Flex component have an elaborate creation model: Life-Cycle, following witch is crucial for successful implementation HTML5 components are native and will always have device-specific UI

48 Flex vs HTML5: Testing Unit testing is easy in both Flex and HTML5 via ASUnit and JSUnit. Integration (or end-to-end) testing is a bit trickier. There are popular options both for HTML5, and Flex. ASUnit, JSUnit Selenium, WebDriver, QTP,

49 Flex vs HTML5: Compatibility Flex developers need to worry about the version of Flash Player installed, while HTML developers need to worry about all the different browsers and different versions of browsers. In the HTML5 Spec, there s a legend next to each section indicating browser support.

50 QA

51 Thank You!