Refactoring to a Single Page Application
-
Upload
codemotion -
Category
Software
-
view
193 -
download
0
Transcript of Refactoring to a Single Page Application
![Page 1: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/1.jpg)
Refactoring to aSingle Page Application Marcello Teodori
ROME 18-19 MARCH 2016
![Page 2: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/2.jpg)
Agenda
● a few definitions● my experience in Workshare● some take aways● current state and future● what’s your experience?
![Page 3: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/3.jpg)
Your traditional web application built on server side technology, whether MVC or component based...
A definition for a “Multi Page Application”
![Page 4: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/4.jpg)
“A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluent user experience similar to a desktop application.In a SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load.”
Single Page Application on WikiPedia
![Page 5: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/5.jpg)
“Code refactoring is the process of restructuring existing computer code – changing the factoring – without changing its external behavior.Refactoring improves nonfunctional attributes of the software.”
(Code) Refactoring on WikiPedia
![Page 6: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/6.jpg)
A refactoring tale: Workshare
1999
WorkshareDoc Comparison and Metadata CleaningDesktop Products
Apr 2012
SkyDox acquisitionDocument Sharing SaaSRuby monolith #1aka Cirrus
Nov 2012
IdeaPlane acquisitionEnterprise Social NetworkJava monolithaka Social
Dec 2014
Dealroom acquisitionLegal Transaction WFERuby monolith #2aka Transact
now
Scalingmicroservices on BESPA on FE
![Page 7: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/7.jpg)
Cirrus
● Typical Rails Application
● Does a Lot :)○ including REST API!
● Does Too Much :(● “Leverages”
ActiveRecord!● You know the end of
the story...
![Page 8: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/8.jpg)
Baaang!
![Page 9: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/9.jpg)
The Masterplan!
● a spike on a SPA○ called “supernova-ui”○ validate we can do JavaScript
● phasing out all server side tech producing front-end code
● migrate backend to microservices○ Cirrus already provides JSON API○ Social doesn’t and becomes first
microservice: Groups API
![Page 10: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/10.jpg)
Let’s start!
![Page 11: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/11.jpg)
Moving backend to microservices
Wally
Users Search
Groups
Social
Cards
Homepage Cards
Cirrus
Sign On
Users
Users Search
Activities
Storage
Files & Folders
Figitus
ADAPT BUILD
EXTRACT
![Page 12: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/12.jpg)
...and embrace JavaScript!
And for the frontend
![Page 13: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/13.jpg)
TAKE #1:setup a front-end build
![Page 14: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/14.jpg)
Node allows front-end developers to take control
● pick your favourite javascript build template○ ex. a yeoman generator
● launch a development server○ ex. via grunt-contrib-connect
● proxy your current web app or API○ ex. via grunt-connect-proxy
● overlay your changes
![Page 15: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/15.jpg)
JavaScript dependency management FTW!
chimera core-ui
files-ui groups-ui dealroom-ui
new-ui
![Page 16: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/16.jpg)
Chimera, the myth of a style guide
![Page 17: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/17.jpg)
TAKE #2:build a client-side application layout
![Page 18: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/18.jpg)
Define your main application layout, client-side
● you will need some basic API○ user API○ account API
● application layout○ topbar○ sidebar○ user menu○ content
● a good candidate for offline
![Page 19: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/19.jpg)
The Workshare Application Layout
topbar
contentsidebar
usermenu
![Page 20: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/20.jpg)
TAKE #3:leave login where it is
![Page 21: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/21.jpg)
Authentication is complex, you don’t want to break it!
● typical web form login● CSRF protection● authentication via cookie● support auth cookie on API● single-sign on flows● vanity domains
![Page 22: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/22.jpg)
TAKE #4:integrate pages via iframe
![Page 23: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/23.jpg)
iframe are ugly but can be useful...
● content access when on same origin● native API to communicate
○ window.postMessage● easy to detect
○ window === window.parent● listen to URL/hash changes
![Page 24: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/24.jpg)
is a backend dev available? cool!
● create a custom page format○ (ex. nova)
● serve a naked version of your page with just the main content○ in Rails :layout => false
● in your url_helper modify your href to send a message via javascript to your parent application
![Page 25: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/25.jpg)
isn’t a backend dev available? oh no!
● load iframe as hidden● hide application chrome and anything
which is not your main content ● patch CSS if necessary● patch links to route on SPA● repeat on URL/hash change
![Page 26: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/26.jpg)
TAKE #5:reuse your test suite
![Page 27: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/27.jpg)
No refactoring without a proper test suite!
● Robot Framework○ API tests○ FE tests via WebDriver
● BDD style test definitions● Re-use with minimal changes
○ if element selector don’t change!○ adapt custom keywords
■ Navigate To (new URLs)■ Locate Element (switch to iframe)
![Page 28: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/28.jpg)
TAKE #6:Apache (or nginx)is your friend
![Page 29: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/29.jpg)
● map existing URLs you want to keep● define your strategy to serve your SPA
○ on a subcontext /new-ui○ on the root
■ via a custom header x-new-ui=true■ on a different server
● proxy APIs and iframe pages○ keep same origin○ no need for CORS headers
It’s deployment time! From Node to Apache/nginx
![Page 30: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/30.jpg)
TAKE #7:manage new development
![Page 31: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/31.jpg)
Evolve existing multi page URLs to single
● inject CSS from parent window● build views in your SPA● instantiate in multi page● inject in parent DOM● it’s really hard but a temporary
workaround until APIs are available!
![Page 32: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/32.jpg)
Now or Never:current state and future
![Page 33: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/33.jpg)
3 years later and 42 microservices after...
● refactoring well is a long and sloooow process...
● ...but we release weekly!● the SPA approach allows iterating
much faster● also designers with front-end skills
can easily build prototypes!
![Page 34: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/34.jpg)
What didn’t work so well
● login pages must be fast!● FOUC (flash of unstyled content)● existing “SPAlets” taking full
control of the page (we had some GWT ones) are hard to integrate
● IE9 and hash URLs● bundle JavaScript in chunks
![Page 35: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/35.jpg)
Disclaimer! Problems we didn’t have to solve
● it’s a web application, not a website● URLs are forever● SEO
○ googlebot crawls #! URLs○ what about the others?
● browsers with JavaScript disabled● IE less than 9● first render speed● should we go isomorphic?
![Page 36: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/36.jpg)
TAKE #8:build an amazing team!
![Page 37: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/37.jpg)
Frontend and Backend teams working together
the Web Squad builds the web frontend user interface...
…but the Cirrus Squad provides the API our features build upon!
![Page 38: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/38.jpg)
A Futurama Halloween!
![Page 39: Refactoring to a Single Page Application](https://reader034.fdocuments.us/reader034/viewer/2022042723/58729e171a28ab07208b5245/html5/thumbnails/39.jpg)
Thanks!
ROME 18-19 MARCH 2016
[email protected]@magomarcelo
All pictures belongto their respective authors