Embed Size (px)
Citation preview
Open Apereo 2016100% Open for Education
On the road of multi-tenancy Portal
at UPMCUniversité Pierre & Marie Curie – Sorbonne Universités
Christian COUSQUER
Software Engineer of the division “research and development”, uPortal
admin at UPMC IT Dept.
Has been working on uPortal since 2005
2016 : uPortal Steering Committee Community Rep.
Ludovic AUXÉPAULES
Deputy chief of the division “research and development”, uPortal admin,
Deputy CISO at UPMC IT Dept.
Has been working on uPortal since 2011
About us
“We are not, thanks God, innovators. We are "continuators", we can say where we come from, what is currently being done and a little where we go…”
“An innovator is someone who hates his predecessors… and who will especially hate his successors.” ( Dialogue between Pierre Renoir and Louis Jouvet )
« L'avenir est un présent que nous fait le passé »
“The Future is a Present that the Past gives to us”
On the Zamansky Tower at UPMC
WHERE WE COME FROM
Reminder of the context at UPMC
WHAT IS CURRENTLY DONE
Quick overview of homemade developments adopted by the uPortal
Project in 4.3.0
Focus on homemade refactoring of portlets around
Responsive Web Design in the portal context in 4 steps : from
closest to furthest, from simple to complex
Workaround n°1 : Simple RWD components (Bootstrap’s HTML5
Components) EsupTwitter, Advanced CMS, Contact Portlets
Workaround n°2 : complex RWD components (HTML5 + CSS / LESS +
JavaScript) Table reflow, Sympa Portlet, Responsive Treeview,
Workaround n°3 : Portlet’s Responsive LESS grids in multi-columns
layout (HTML5 + LESS) Feedback Portlet
Workaround n°4 : Towards even more complex responsive user
interfaces (HTML5 + LESS + JavaScript) Email Preview
AND WHERE WE GO…Feedback on the migration strategy adopted from a single University
Portal to a multi-tenant Portal
SUMMARY
WHERE WE COME FROM
CONTEXT
One of the founding members of the High Ed Alliance “Sorbonne University”
Alliance of 11 university institutions
Paris-Sorbonne University, Pierre and Marie Curie University, University of Technology of Compiegne,
INSEAD, National Museum of Natural History, The French National Center for Scientific Research, The
French Institute for Research in Computer Science and Automation, etc.
Website : http://www.sorbonne-university.com/
UPMC Facts and Figures
18 sites across 4 regions in France
15 in Paris region
3 stations (Banyuls, Roscoff, Villefranche)
35 000 students, of whom
6400 foreign students
3300 doctoral candidates
10 500 staffs, of whom
8200 in research units (120 research laboratories)
UPMC Website and Web applications
Website : http://www.upmc.fr/en/index.html
Portal : https://mon.upmc.fr (uPortal)
Pierre and Marie Curie University - UPMC
Deployment strategy
uPortal in production since 2005
Member of the ESUP-Portail Consortium since
2005
Signed two Contributor License Agreements
(CLA) for Apereo
Product strategy: We closely stick to the basic
product, any improvement is pushed to the
Apereo source code rep.
Desktop View (Universality)
monUPMC version 4.0.1*
Mobile View (mUniversality)
monUPMC version 4.0.1*
A new University
In 2018, the merger of Paris-Sorbonne and
Pierre et Marie Curie universities will transform
Sorbonne University into a fully-fledged
university with three autonomous faculties:
Humanities and Social Sciences, Sciences and
Medicine.
All existing services need to migrate. (“Iso-functional” migration
[without losing functional behaviors])
Skin proposals conformed to the dynamic skin layout Manager
Responsive Web Design everywhere, no more mobiles views
More security, management flexibility and delegation of
administrative rights to Tenant Admins
The sharing of a same technical platform increases the level of
security, surveillance and paves the way for future pooling
Implies multi-authentication questions (CAS, Shibboleth…), etc.
Two parallel, distinct and complementary projects
Update the portal and the portlets to uPortal 4.3
Switch to a multi-tenant architecture with uPortal 4.3
WHAT IS CURRENTLY DONE
Overview of a homemade developments in 4.3.0
UPMC Skin
Sorbonne University Skin
Off-Canvas
A small issue in mobile
usability due to Responsive Web
Design in 4.2: On Mobile, a
portal user has a tendency to
scroll vertically too much.
Need for a development on
the project:
A Main Nav in Off-Canvas
Sticky Nav
A Sticky Nav on top with a
small ScrollTop animation effect
to change of tab, on an idea of
Oakland University – Thanks
Aaron Grant
All these developments are
the default mobile behavior in
uPortal 4.3 – Thanks to Drew
Wills & James Wennmacher
Workaround n°1 : Simple RWD components (Bootstrap’s HTML5
Components) EsupTwitter, Advanced CMS, Contact Portlet
Refactoring of portlets around Responsive
Web Design
WHAT IS CURRENTLY DONE
Simple Layout: Adding simple Bootstrap classes is enough.
Add data-attributes and HTML 5 attributes
http://getbootstrap.com/components/
http://getbootstrap.com/javascript/
Accordion, List Group, Thumbnails, Tabs, Navbar, Buttons, etc.
Add Bootstrap CSS Component classes accordingly
http://getbootstrap.com/css/
Add on top “container-fluid” & “bootstrap-styles” Classes
https://wiki.jasig.org/display/UPM41/CSS+Best+Practices
Objective: Publish a hundred of Advanced CMS Portlets in 4 days
Production of a dozen templates in html5 with Bootstrap to generate a
hundred portlets quickly by copying and pasting.
Use data attributes of bootstrap
Simple RWD components
Thumbnails
Accordion
List Group
List Group : EsupTwitter
Carrousel
Tabs
Contact Portlet
Add scoped CSS rules to counter jQuery UI’s ones to make them look like Bootstrap Components
Contact Portlet
jQuery UI Accordion Tabs components
25 lines of CSS – quick Patch
Simple RWD components
Workaround n°2 : complex RWD components
(HTML5 + CSS / LESS + JavaScript) Table
reflow: Sympa Portlet, Responsive Treeview…
Complex Layout component : Adding simple Bootstrap classes is not enough.
1. Pure CSS / LESS Way
Table Element on mobile : CSS Table Reflow on mobile
View
Esup Sympa Portlet
Complex RWD components : Table
Esup Sympa Portlet Table
Reflow:
Desktop View
Mobile View
Mobile first mixin
In Less, import table-reflow.less
In theme.less put : .createtable-reflow (@param1, @param2, …)
In jsp :
put “reflow” class on the table element
Put table headers styles :
.feedback-result td:nth-of-type(1):before { content: "<spring:messagecode="feedback.admin.rowtitle.name"/> :";}
That’s all, you’re done, the table will reflow on mobile.
Table Reflow LESS Mixin
2. Html5 / CSS/ LESS / JavaScript Way
Tree View on mobile: Need to Change the UX / UI
Esup Filemanager
Work in progress / workaround
Complex RWD components : Tree View
Esup Filemanager
Tree View: Actual View &
Workaround in progress View
Workaround n°3 : Portlet’s Responsive LESS
grids in multi-columns layout (HTML5 + LESS)
Feedback Portlet
Each portlets have their own scope within the
Portal scope in the Dashboard View in multi-
columns and They share the same CSS Grid
Reminder on Bootstrap Grid
On Desktop View, the container (fluid) is divided in 12* columns by
default
* can be changed
On Single column layout or maximized View: bootstrap Classes work very well in portlets.
In 2, 3, 4, 6 columns, the same portlet will be cramped
That’s normal because the markup is the same (HTML & CSS) and the CSS rules are the same because the viewport is the same.
How can we solve this problem without injecting a Who- knows-what-future-css-behaviors-rules-that-Browser- Vendors-will-adopt-when-they-will-in-common-agreed-JavaScript-transpiler library ?
Statement of the Problem
What’s the difference between single column layout and multi-columns layout
The Portal portlet column has a Bootstrap class “col-
md-12” in single column layout
The Portal portlet columns have a combinations of
“col-md-7 / col-md-5, col-md-6, col-md-4, col-md-3, col-
md-2” Bootstrap classes in multi-columns layouts
So if I scope within these combinations in a media-querie for
desktop some namespaced CSS rules, the result will be CSS
rules that will be applied only when the portlet is in desktop
multi-columns layout
That’s lot of combinations
Why don’t we use Bootstrap classes without create extra CSS
classes? So the markup single/multi columns will remain the
same
But we need to change a little a few of their rules and
behaviors only for multi-columns
Analysis
Can we imagine a sort of CSS breakpoint in the portlet layout that will reflow the columns and recalculate, according to the breakpoint, the widths of the column Grid?
This can solve the problem of the cramped columns in multi-
column View
Can complex components of the portlet adopt mobile behaviors if they are in multi-column layout in desktop Layout ?
LESS / Sass are your friends…
Bevahiors Statements
For Loops in LESS
LESS:
.loop(@counter) when (@counter > 0) {
/* next iteration */
.loop((@counter - 1));
/* code for each iteration : */
width: (10px * @counter);
}
div {
.loop(5); // launch the loop
}
Output (CSS):
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
http://lesscss.org/features/#loops-feature
I need to generate dynamically this kind of pattern: .portal-page-column.col-md-7 [email protected]@portletcolumnbreakpoint .col-md-12
6 11
5 10
… (first loop) (second loop) …
And nest the CSS mobile complex component behaviors in less within the second loop.
Less than 35 lines of LESS (portlet-grid.less)
Demo : Feedback Portlet
Demo Feedback Portlet
Mobile first mixin
Add the values of @namespace and @bootstrap-col-breakpoint in variables.less
In Less, import portlet-grid.less Mixin, add the Mobile component behaviors styles in
it
In theme.less at the end put :
// Using the loop
@media screen {
@media (min-width: 992px) {
.col(col-md; @col);
}
}
In jsp, put “container-fluid” “@namespace” and “bootstrap-style-by-X” classes on the
top wrapper div element
That’s all, you’re done, your Bootstrap Portlet will have special behavior in
multicolumns layout.
Portlet-Grid LESS Mixin
Use ‘bootstrap-style-by-6’ class
Portlet layout grid in col-md-6
Use ‘bootstrap-style-by-4’ class
Portlet layout grid in col-md-4
Use "bootstrap-style-by-5" or
"bootstrap-style-by-7" classes
col-md-4
• col-md-4
• col-md-4
col-md-4
• col-md-4
• col-md-4
col-md-4
• col-md-4
• col-md-4
col-md-6 col-md-6
col-md-6 col-md-6
col-md-12
col-md-5
col-md-3
col-md-4
col-md-5
col-md-7
Portlet layout grid in col-md-5 / 7
Update to Java 1.8
Refactoring of Submit Feedback, ….
Refactoring of Feedback-admin, …. ….
Refactoring of Table n°1
Refactoring of Table n°2
Table reflow Mixin
Styles in LESS
Awesome checkbox
Styles in LESS split into 3 files
Clean-up, Comment Code
Story in JIRA
PR to Apereo repo
Refactoring of Apereo Feedback Portlet
Workaround n°4 : Towards even more
complex responsive user interfaces (HTML5 +
LESS + JavaScript) Email Preview
Analysis of the existing
A Rollup with notifications
Analysis of the existing
Preview of Email List
Analysis of the existing
Preview of Email Message
FilamentGroup jqm-mail
https://github.com/filamentgroup/jqm-mail
Problem: use jQuery Mobile when it is removed from the project.
But the idea of the withdrawal between folders, the list of mails and
the selected mail is interesting
A little less interested in opening the selected mail inside the list of
mails
Interesting way of doing things
Google App Gmail (not google INBOX)
Native App, but this is not a problem
Different behaviors between iphone and ipad
Triple Off-canvas (Folders / List of mails / Message display / Write &
Reply to a message)
It could be very interesting to combine this with Filament Group-jqm-
Market research (RWD)
The “Page” change between the display of the List of messages and the display of the Selected Message is done by modifying the CSS property "display" from "block" to "none" via JavaScript, They are within the same DOM ...
Nothing can stop me to display both views at the same time.
Find an approach angle
var showEmailList = function(that) {
that.locate("loadingMessage").hide();
that.locate("emailMessage").hide();
that.locate("errorMessage").hide();
that.locate("emailList").show();
};
…
var showEmailMessage = function(that) {
that.locate("loadingMessage").hide();
that.locate("emailList").hide();
that.locate("errorMessage").hide();
that.locate("emailMessage").show();
};
var showEmailList = function(that) {
that.locate("loadingMessage").hide();
that.locate("emailMessage").show();
that.locate("errorMessage").hide();
that.locate("emailList").show();
};
...
var showEmailMessage = function(that) {
that.locate("loadingMessage").hide();
that.locate("emailList").show();
that.locate("errorMessage").hide();
that.locate("emailMessage").show();
};
Update the JavaScript libs
Work with the existing way it is coded and the “that” way of doing JavaScript (Fluid...)
We are “ continuators ” so if you do “that”, I do “that”. But in terms of
code readability, it is not optimal for a non-English speaker
Example in email-browser.js (570 lines):
10 occurrences of “this”
+150 occurrences of “that” !!!!
JavaScript Integration
that.locate(“xxx").click( function(){ doThis(that, this); }); // oh my!
If a JS component wants a particular element to run, put it its element, everything can be changed with CSS and ARIA attributes and roles
HTML & CSS Integration
Demo Email Preview Portlet
(work in progress)
Device State Detection with CSS Media Queries and JavaScript to inject different behaviors according to the states
Being able to detect device state at any given moment is important
for any number of reasons and so it's important that web app CSS
and JavaScript are in sync with each other.
Device State Detection with CSS Media Queries and JavaScript
https://davidwalsh.name/device-state-detection-css-media-queries-javascript
David Walsh - Senior Web Developer and software engineer at Mozilla
A hundred times more effective than
sniffing on Server-side the user-agent
or to calculate in JavaScript
the width, the outer-width, etc.
A nightmare…
Combining this technics with JavaScript:window.matchMedia("(min-width: 600px)").matches
You can detect every state of the portlet
mobile, tablet, desktop, in single/max
layout, in multi columns layout and give the portlet specific behaviors
according to the portlet state on client side.
A few useful resources: JavaScript/CSS
This technics improves the intelligence of the interface of the portlet
It improves the “Plasticity of the portlet interface”
Plasticity is the capacity of a user interface to withstand
variations of both the system physical characteristics and the
environment while preserving usability
If a portlet can know its nearest context and adopt behaviors according to it,
I can use this technics in the Portal to detect if drag n drop
Grab Handle is activated and stop the Swipe event to open
the off canvas nav in uPortal 4.3
If you’ve got two friendly portlets, it can know also detect if
another “friendly” portlet is in its nearest context too, and -
why not- prepare interactions between the two portlets with a
perfect sync between CSS and JavaScript…
Going deeper
Intelligence is given to client-side by this technics.
If the Portal web page was a little robot on Mars, and the backend server, the JPL on Earth. The little robot needs to trust and to use at the maximum the resources and energy that it could find in its nearest environment itself, because in some cases it can’t wait for some tasks that require 16 minutes in I/O resquest.
So What resources, the nearest or the remote resources? And the question is: What intelligence do you want to give to the Client Side?
The little robot on Mars
metaphor
When animating elements - any element, no matter how small- only animate properties that are GPU accelerated. In CSS, this means using the translate3d transform property, which is hardware accelerated, rather than modifying the top and left properties, which are not. Animating properties which don’t have hardware accelerated counterparts - such as an element’s height - should be avoided altogether.
http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-
the-web/
A few useful resources: CSS on mobile
Refactoring of Rollup
Refactoring of EmailPreview Refactoring of Select Folder code to a Folder List
Refactoring of email List code
Refactoring of pagination
Update to Fluid 1.3, 1.4
CSS Styles
CSS State detection
Improve i18n
Gmail test
MS Exchange test
Implement Badge of unread message in Folder List (work in progress)
Folders List UX advanced collapsible Component (work in progress)
Update to Fluid 1.5 (the same as the Portal) (work in progress)
Styles in LESS, Bootstrap-style-by-4 LESS Mixin (?)
Device state detenction
Clean-up, Comment Code
Story in JIRA
PR to Apereo repo
Refactoring of Apereo Email-Preview Portlet
We just changed the client side. Nothing on the server side
The most important: Where are the Data?
Data are preserved
Focus Conclusion
AND WHERE WE GO…
Feedback on the migration strategy
adopted from a single University Portal
to a multi-tenant Portal
Building a new University is not a easy thing
It implies organizational questions, institutions history, etc.
The UPMC Portal Steering Commitee hasn’t been organized
since one year
“Easing technically the upgrade and the new Architecture”
There’s a implicit need to have a excellent first impression
Pending a strategic & politic green light, when the new Portal Steering Committee will be set up.
Questions on the deployment process : Can we add progressively Institutions LDAP, CAS, Categories, etc.? We need feedbacks, Tips, advices, etc.
Many Thanks to Drew, James, Benito and folks for the performance Enhancements in uPortal 4.3, we feel much more confident now in multi tenancy.
Migration strategy: from a single University
Portal to a multi-tenant Portal
”Not whit, we defy augury; there is special providence in the fall of sparrowe. If it be now, 'tis not to come if it be not to come, it will be now. If it be not now, yet it will come; the readiness is all.” William Shakespeare - Hamlet - A.v S.ii
For now, we accumulate ammunition, pending
a strategic green light.
Conclusion
If, in IT, the hands of Time reverse themselves constantly,
If, in IT, the Present, the Present itself, is engaged,
Then the Memory can be a Future.
So my good Ol' Portal, we wish you a good past at UPMC,
thou hast had a wonderful future...
Instead of telling you: "Good luck!" for what you would
have been,
We wish you: "Good Luck" for what thou shalt be at the
new University.
Thou art still in childhood.
Frenglish END
Questions ?
How Browsers Work: Behind the scenes of modern web browsers
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Device State Detection with CSS Media Queries and JavaScript
https://davidwalsh.name/device-state-detection-css-media-queries-javascript
Advanced CSS for mobile
http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/
Resources
Thank you
