PKP Development News Webinar February 2024
This is the recording of the PKP Development News Webinar held on February 5, 2024.
Chapters
01:20 Introduction
02:38 OJS, OMP, and OPS 3.4.0
05:00 3.5.0 and the Future
19:40 Storybook
45:13 Submission Lists
49:30 COUNTER R5 reports
54:15 Upcoming Events
54:44 Thanks and Questions
Links from the presentation
Storybook
Migrated from in-house documentation tool to Storybook: https://storybook.js.org
Link to storybook can be found in ui-library readme: https://github.com/pkp/ui-library
Open source project with large ecosystem of addons: https://github.com/storybookjs/storybook
Simple API mocking:
storybook: https://main--6555d3db80418bb1681b8b1...
code: https://github.com/pkp/ui-library/blo...
Possibility to test interactions (opening modal in this case): https://main--6555d3db80418bb1681b8b1...
Only drawback so far has been some instability: https://github.com/storybookjs/storyb...
Visual testing with Storybook
Chromatic has great integration with Storybook: https://www.chromatic.com
Every story is screenshotted: https://www.chromatic.com/library?app...
Left to Right language: https://www.chromatic.com/component?a...
Right to Left language: https://www.chromatic.com/component?a...
Changes are tracked and need to be approved: https://www.chromatic.com/builds?appI...
Interactivity testing opportunities: https://www.chromatic.com/features/in...
Admin UI Technical Roadmap
Catching up with Vue.js ecosystem
Composition API: https://main--6555d3db80418bb1681b8b1...
Pinia Store: https://main--6555d3db80418bb1681b8b1...
Updated Page Architecture: https://main--6555d3db80418bb1681b8b1...
New Composables as replacement of mixins: https://main--6555d3db80418bb1681b8b1...
Styling with TailwindCSS: https://main--6555d3db80418bb1681b8b1...
Doubling down on Vue.js
Some challenges from combining Smarty and Vue.js: https://main--6555d3db80418bb1681b8b1...
Improvement - simplified use of translations in Vue.js: https://main--6555d3db80418bb1681b8b1...
Composition API
Vue3 introduced Composition API as more expressive alternative to Options API: https://vuejs.org/guide/extras/compos...
Opportunity to organise more complex Pages by features: https://github.com/pkp/ui-library/blo...
Vue.js ecosystem is shifting towards composition API
e.g., nuxt 3: https://nuxt.com/docs/api/composables...
e.g., vueuse.org: https://vueuse.org/
Exactly the same syntax when used directly in Component or in Pinia Store: https://pinia.vuejs.org/core-concepts...
Pinia Store
Pinia is part of official Vue.js ecosystem: https://pinia.vuejs.org/
Easy to connect from any child component: https://github.com/pkp/ui-library/blo...
Good plugin support out of the box: https://pinia.vuejs.org/core-concepts...
Updated Page Architecture
Smarty template still responsible for rendering menu and header (to be replaced later): https://github.com/pkp/pkp-lib/blob/m...
Page has template as part of the component: https://github.com/pkp/ui-library/blo...
Page business logic placed in Pinia stores: https://github.com/pkp/ui-library/blo...
Our Example Page template
in Storybook: http://localhost:6007/?path=/docs/pages-example--docs
Code: https://github.com/pkp/ui-library/tre...
More links in the pinned comment!
Upcoming PKP Sprint: https://pkp.sfu.ca/2024/02/01/pkp-spr...
This is the third in a series of updates from PKP's Development Team.
Watch past updates:
November 23 update: • PKP Development News Webinar November 2023
August 23 update: • PKP Development News Webinar August 2023
December 22 update: • PKP Development News Webinar December 2022
Please stay tuned for more PKP Development News Webinars!