traveler @ frib - indico-fnal (indico) · d. liu -- epics collaboration, may 2015, slide 7...
TRANSCRIPT
![Page 1: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/1.jpg)
This material is based upon work supported by the U.S. Department of Energy Office of Science under Cooperative Agreement DE-SC0000661, the State of Michigan and Michigan
State University. Michigan State University designs and establishes FRIB as a DOE Office of Science National User Facility in support of the mission of the Office of Nuclear Physics.
Dong Liu ([email protected])Software Engineer
Traveler @ FRIB
![Page 2: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/2.jpg)
Traveler workflow
D. Liu -- EPICS Collaboration, May 2015, Slide 2
http://prezi.com/x_dsx1fpzboy/?utm_campaign=share&utm_medium=copy&rc=ex0share
![Page 3: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/3.jpg)
Application architecture
D. Liu -- EPICS Collaboration, May 2015, Slide 3
![Page 4: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/4.jpg)
Node.js (https://nodejs.org/)
Express.js (http://expressjs.com/ 3.1.0 needs upgrade)
bootstrap (http://getbootstrap.com/ 2.3 needs upgrade)• Jade (http://jade-lang.com/) for template
jQuery (https://jquery.com/ 1.9)
Datatables (https://www.datatables.net/ 1.9.4 needs upgrade)
Twitter typeahead (http://twitter.github.io/typeahead.js/)
Form binder (https://github.com/dongliu/formbinder)
Form builder • Rivets.js (http://www.rivetsjs.com/)
CAS for authentication (https://github.com/rubycas/rubycas-server)
MongoDB/mongoose.js (https://www.mongodb.org/ http://mongoosejs.com/)
Technology stack
D. Liu -- EPICS Collaboration, May 2015, Slide 4
![Page 5: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/5.jpg)
JSON from DB to application to client• No ORM (++)
• Hard to support other format (-)
No threading and synchronized/.concurrent.• Almost no chance for racing/deadlock (+++)
• Callback hell (--)
Flexible data structure• Support array of anything (++)
• Easy schema change and back compatible (+++)
• Loose validation(--+)
• Duplication and inconsistence (--+)
node + mongo
D. Liu -- EPICS Collaboration, May 2015, Slide 5
![Page 6: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/6.jpg)
desktop app -> network and mobile app (client/server)
local library -> network API
local call -> RPC -> messaging, event-driven, REST
synchronous -> asynchronous
purely object-oriented -> functional
basic client -> rich client
heavy static framework -> light dynamic framework/language
relational -> unstructured
one-size-fits-all -> diversity
Paradigm shifts
D. Liu -- EPICS Collaboration, May 2015, Slide 6
![Page 7: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/7.jpg)
Resources• Interface first for testing
• View -> Model -> Controller» HTML/CSS -> test -> DOM/JavaScript -> test -> XHR -> test -> GET /model -> test
-> POST/PUT /model -> test -> DELETE /model -> test
• Most resource loaded via JSON/HTTP -> API
Responsive design• Better user experience on different screens
• Mobile client friendly
Reactive design• Render only partial page when possible
• Lightweight model view viewmodel (MVVM)
• Push lightweight processing tasks to the client
Design and development process
D. Liu -- EPICS Collaboration, May 2015, Slide 7
![Page 8: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/8.jpg)
Restructure the application for reporting feature• User defined traveler groups for tracking and reporting
• User interfaces for form/traveler/report
TODO
D. Liu -- EPICS Collaboration, May 2015, Slide 8
![Page 9: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/9.jpg)
Source• https://github.com/dongliu/traveler
Design documents• https://drive.google.com/file/d/0B39LbIQJq1dreEJSaVJ2TGRCMzA
• https://drive.google.com/file/d/0B39LbIQJq1drRkE4YV9mVl84Wjg
• https://docs.google.com/document/d/12p4eO0b-Bv3jGVLsbYzMU0IeYa-xHX6r9DYDpn2Udrs/edit?usp=sharing
Manuals• https://docs.google.com/document/d/1l9YY2_czQ193zDv8mIhRMFYIpaMgf
GyHr23EwrJ2FLM/pub
• http://rawgit.com/dongliu/traveler/master/public/about.html
• http://rawgit.com/dongliu/traveler/master/public/api.html
Traveler resources
D. Liu -- EPICS Collaboration, May 2015, Slide 9
![Page 10: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/10.jpg)
Form builder
D. Liu -- EPICS Collaboration, May 2015, Slide 10
Edit/copy/delete
What you see is what you get
Rich editor: Link, image, special characters …
![Page 11: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/11.jpg)
Main user interface
D. Liu -- EPICS Collaboration, May 2015, Slide 11
![Page 12: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/12.jpg)
Traveler share
D. Liu -- EPICS Collaboration, May 2015, Slide 12
![Page 13: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/13.jpg)
Traveler page
D. Liu -- EPICS Collaboration, May 2015, Slide 13
Side Nav
Message
Notes
History
Summary with
validation code
![Page 14: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/14.jpg)
Cable main interface
D. Liu -- EPICS Collaboration, May 2015, Slide 14
![Page 15: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/15.jpg)
Plot
D. Liu -- EPICS Collaboration, May 2015, Slide 15
![Page 16: Traveler @ FRIB - INDICO-FNAL (Indico) · D. Liu -- EPICS Collaboration, May 2015, Slide 7 Restructure the application for reporting feature •User defined traveler groups for tracking](https://reader035.vdocument.in/reader035/viewer/2022071020/5fd41ce141591837a9193ed5/html5/thumbnails/16.jpg)
User management
D. Liu -- EPICS Collaboration, May 2015, Slide 16