the primo new ui development approach and …...© 2015 ex libris | confidential & proprietaryex...
TRANSCRIPT
![Page 1: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/1.jpg)
© 2015 Ex Libris | Confidential & Proprietary
Ohad Shaked | Primo Development Manager
The Primo New UI Development Approach and Concepts
![Page 2: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/2.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
Agenda
• UI Major Principles
• Choosing a commonly used development framework
• Angular at a glimpse
• New UI Customization Approach
• Primo New UI
![Page 3: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/3.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
One experience across devices
Applying Core UX Principles
3
Action-driven: Expose relevant functionality
Designed for performance
Analysis for
continuous
optimization
Easy to configure
and maintain UI
Clear and intuitive design
![Page 4: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/4.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
The New Primo UI – Major Principles
• New modern intuitive and innovative UI
• Responsive UI - Discovery via mobile, tablet,
desktop
• Flexible and easy configuration
• Gradual switch
4
![Page 5: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/5.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
Choosing a development framework
• Modular, readable, clean code
• Accessibility (ngAria - Accessible Rich Internet Applications)
• Responsiveness
• Performance
• Security
• Data-Binding
• Templating
• Code reuse
5
![Page 6: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/6.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
Angular
6
![Page 7: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/7.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
Angular as a framework
• MVC architecture
• Structured code:
• View (html)
• Augmented view functionality belongs in Directives
• Routing/ Injecting (single page app)
• Logic (like ajax calls) in Services
• Controller – connects services and logic to view
7
![Page 8: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/8.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
Angular as a Framework – cont.
• Model – Data modeling
• Two-Way Data-Binding
• Unit-testing ready
• Performance
• Aggressive cache• Minimal page size
8
![Page 9: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/9.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
Angular – 2 Way Data Binding
9
Source: https://docs.angularjs.org
![Page 10: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/10.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
Angular – 2 Way Data Binding
10
Source: https://docs.angularjs.org
![Page 11: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/11.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
New UI Customization principles
• Manageability Challenge• Enable Max customization with Min limitations• Enable customization & keep smooth upgrades• Prevent environmental breaches / Saas limitations
• Improved client-side functionality capabilities • Angular vs. JSP
• How to ?
11
![Page 12: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/12.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
New UI Customization principles – cont.
• Provide customization/configuration capabilities• Wizard for common configurations
Example: GUI elements properties (Show/Hide, Coloring, element location etc. )
• Element/Directive configuration• Change View/ Controller elements• Provide a map of directives and placeholders
• Customization Package• Customers’ code directories - partial exposure• Local development done by customer• Package Loader script/API
12
![Page 13: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/13.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
The new User Interface
13
![Page 14: The Primo New UI Development Approach and …...© 2015 Ex Libris | Confidential & ProprietaryEx Libris | Confidential & Proprietary One experience across devices Applying Core UX](https://reader030.vdocument.in/reader030/viewer/2022040611/5ed55a14c960084a39789376/html5/thumbnails/14.jpg)
© 2015 Ex Libris | Confidential & Proprietary© 2015 Ex Libris | Confidential & Proprietary
The new User Interface
14