Downloaded 22 times
Uploaded byMagnolia
Highly Scalable User Experience Design: Vaadin and Magnolia
The document discusses the integration of Vaadin as a UI framework within Magnolia CMS, focusing on the development of applications, customization options, and user experience improvements. Key features include a modular architecture, data binding, and a rich set of reusable components optimized for enterprise web applications. The presentation also covers practical development patterns, available add-ons, and the importance of supporting multiple browser and device platforms.
More Related Content
Similar to Highly Scalable User Experience Design: Vaadin and Magnolia
Highly Scalable User Experience Design: Vaadin and Magnolia
- 1. MAGNOLIA CMS UX/UI DESIGN WITHVAADIN JANUARY 26, 2015 Photo Credit: AMPLIFY, MUNICH
- 2. ALEKSANDR PCHELINTCEV SR. JAVADEVELOPER @ MAGNOLIA INTERNATIONAL ! ALEKSANDR.PCHELINTCEV@MAGNOLIA-CMS.COM
- 3.
- 4. IN THIS TALK MeetAdminCentral Introduction to Vaadin Apps UI framework Writing an app UI Customisation with Vaadin Data binding Future
- 6. OPEN SUITE Magnolia Bundle CONFIGURATION MAGNOLIAUI TEMPLATING KIT WORKFLOW PERSONALISATION … CORE IoC
- 7.
- 8. ADMIN CENTRAL The faceof CMS Place where time is spent User Experience - priority #1
- 9.
- 10. ADMIN CENTRAL INACTION
- 11. MAGNOLIA UI UX Fresh look Clearinteractions App Paradigm Task-oriented Modular & Scalable Flexibility Fully configurable Server-side API
- 12. CHALLENGES Architecture Simple Java API Security Unittesting Technical Cross-browser Support mobile platforms Foundation Rich set of re-usable components
- 13. FRAMEWORK PICK GWT-based Java OSS Enterpriseweb-app oriented Encapsulates browser quirks The final choice: Why?
- 14.
- 15. Vaadin Sections Magnolia Amplify Ville Ingman,Vaadin Ltd ville@vaadin.com
- 16.
- 18. Our Mission Make buildingamazing web applications easy
- 21. > 130.000 developersfrom > 10.000 cities > 500 add-ons in the marketplace Other 4%Asia 21% Americas 21% Europe 54% Vaadin Ecosystem Apache-licensed
- 22. Typical use-cases are ERPs, Financial and Intranet/Extranet services i.e. Business Applications 40% of Fortune 100
- 23.
- 24. What kind ofdevices does your app support? 98.1% 3Desktop browsers Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% app support? 98.1% 25.7% Phones 36.1% ts Others 2.1% “Since gwt is used e in the enterprise, this explain why tablets are popular than support for phones” Daniel iPhone Android WP 25.7% Phones 36.1% Tablets “Since gwt is used extensively in the enterprise, this may explain why tablets are more popular than support for phones” Daniel iPad Android Windows + +
- 25.
- 32. How does itwork, really?
- 34. • Initial HTML •CSS (theme) • Images • JavaScript ! 1.2M total 307k compress 135k reduced widgetset
- 36. • name=”Joonas” • buttonclicked ! 261 bytes
- 38. • name=”Joonas” • buttonclicked ! 261 bytes • Add notification ! 267 bytes
- 39.
- 40. MAGNOLIA UI FRAMEWORK Mainprinciples and components Let’s get a bit technical See the apps
- 41. UI FRAMEWORK Focus onthe business: Presentation logic Vaadin view Framework takes of the rest: MagnoliaShell: App environment Base app implementations App life-cycle management App communication
- 42. MAGNOLIA SHELL Launch andnavigate between apps View and manage messages and workflow tasks Bookmark and navigate between favourite locations
- 43. Messages and tasksmanaged as filterable lists, easing both communication & review Launch and navigate between apps View and manage messages and workflow tasks Bookmark and navigate between favourite locations MAGNOLIA SHELL Launch and navigate between apps View and manage messages and workflow tasks Bookmark and navigate between favourite locations
- 44. MAGNOLIA SHELL Launch andnavigate between apps View and manage messages and workflow tasks Bookmark and navigate between favourite locations
- 45. MAGNOLIA SHELL SERVER CLIENT Apps LocationControllerShell Connector LOCATION VIEW RPC/STATE MagnoliaShellView ! Viewport Widget Viewport Magnolia Shell
- 46. APPS AND SUB-APPS FOURSUB-APPS OPENED IN THE TABBED APP VIEW.
- 47. CONTENT APP PACKAGE ProvidesCRUD functionality Set of sub-apps and components - Content views - Fields - Actions - … Extensible and re-usable
- 48. Ordered list and treeviews for data entries
- 49.
- 50. Entry management tools convenientlydisplayed in collapsible action bar
- 51. Data managed usingforms that can be created with a rich set of field types powered by Vaadin
- 52.
- 53.
- 54.
- 55. DEVELOPMENT PERKS Automatic applocation mapping #app:<appName>:<subAppId>:<param1;param2> ! Inversion of control @Inject, @Singleton … Scopes: <app>, <sub-app>, <admincentral> Additional UI features Notifications Overlays
- 56. CUSTOM SUB-APPpublic classMySubApp extends BaseSubApp<MyView> { private final EventBus eventBus; @Inject public MySubApp( @Named(SubAppEventBus.NAME) EventBus eventBus,SubAppContext ctx, MyView view){ super(subAppContext, view); this.eventBus = eventBus; } @Override protected void onSubAppStart() {/*Execute start-up logic*/} @Override protected void onSubAppStop() {/*Dispose the resources*/} @Override public void locationChanged(Location l){ // Update the view according to the changes }
- 57. CUSTOM VIEW! public classMyView implements View { ! private Component label = new Label(“Hello Amplify!”); ! @Override Component asVaadinComponent() { return this.label; } ! }
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 73.
- 74.
- 75.
- 76.
- 77.
- 80.
- 81. Built-in Server @Push Atmosphere: WebSockets,HTTPStreaming, Long polling
- 86. Grid • Custom headers and footers •Frozen columns • Embedded widgets • Large datasets
- 87. Declarative UI • HTMLbased • New Visual Designer with collaborative features
- 88.
- 89.
- 91. Eclipse Download plugin fromMarketplace
- 92.
- 93. Netbeans Download plugin NetbeansPlugin Portal
- 94.
- 95. Download for Free vaadin.com/book PDF,ePub, HTML 9 789529 319701 ISBN 978-952-93-1970-1 9 789529 319701 ISBN 978-952-93-1970-1 Vol 1 288 pages Vol 2 434 pages
- 96. Web apps, notweb sites!
- 98.
- 99. CONTENT CONNECTORS MANAGE EXTERNALCONTENT WITH APPS
- 100.
- 102.