PKP Development News Webinar February 2024
Channel: Public Knowledge Project
Date: 2024-02-05

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--6555d3db80418bb1681b8b17.chromatic.com/?path=/story/pages-submissions--init  
- code: https://github.com/pkp/ui-library/blob/main/src/pages/submissions/SubmissionsPage.stories.js#L19
* Possibility to test interactions (opening modal in this case): https://main--6555d3db80418bb1681b8b17.chromatic.com/?path=/story/components-sidemodal--two-columns-layout
* Only drawback so far has been some instability: https://github.com/storybookjs/storybook/issues/24155

Visual testing with Storybook
* Chromatic has great integration with Storybook: https://www.chromatic.com
* Every story is screenshotted: https://www.chromatic.com/library?appId=6555d3db80418bb1681b8b17&branch=main
- Left to Right language: https://www.chromatic.com/component?appId=6555d3db80418bb1681b8b17&csfId=pages-submissionwizardpage&buildNumber=170&k=65b924c63e8a879533e35b79-desktop-snapshot-true&h=6&b=-4
- Right to Left language: https://www.chromatic.com/component?appId=6555d3db80418bb1681b8b17&csfId=pages-submissionwizardpage&buildNumber=170&k=65b924c63e8a879533e35b7a-desktop+rtl-snapshot-true&h=7&b=-5
* Changes are tracked and need to be approved: https://www.chromatic.com/builds?appId=6555d3db80418bb1681b8b17&branch=main
* Interactivity testing opportunities: https://www.chromatic.com/features/interaction-test

Admin UI Technical Roadmap
* Catching up with Vue.js ecosystem
- Composition API: https://main--6555d3db80418bb1681b8b17.chromatic.com/?path=/docs/guide-vue-composition-api--docs
- Pinia Store: https://main--6555d3db80418bb1681b8b17.chromatic.com/?path=/docs/guide-pinia-store--docs
* Updated Page Architecture: https://main--6555d3db80418bb1681b8b17.chromatic.com/?path=/docs/guide-page-architecture--docs
* New Composables as replacement of mixins: https://main--6555d3db80418bb1681b8b17.chromatic.com/?path=/docs/composables-usefetch--docs
* Styling with TailwindCSS: https://main--6555d3db80418bb1681b8b17.chromatic.com/?path=/docs/guide-style-introduction--docs

Doubling down on Vue.js
* Some challenges from combining Smarty and Vue.js: https://main--6555d3db80418bb1681b8b17.chromatic.com/iframe.html?viewMode=docs&id=guide-technical-roadmap--docs#vuejs--smarty---vuejs-35
* Improvement - simplified use of translations in Vue.js: https://main--6555d3db80418bb1681b8b17.chromatic.com/?path=/docs/composables-usetranslation--docs

Composition API
* Vue3 introduced Composition API as more expressive alternative to Options API: https://vuejs.org/guide/extras/composition-api-faq.html
* Opportunity to organise more complex Pages by features: https://github.com/pkp/ui-library/blob/main/src/pages/submissions/submissionsPageStore.js
* Vue.js ecosystem is shifting towards composition API
- e.g., nuxt 3: https://nuxt.com/docs/api/composables/use-app-config
- 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/#Setup-Stores

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/blob/a6a38569d73f7eefef69de5c8974a24cfd1c4879/src/pages/submissions/ColumnActions.vue#l24tv 
* Good plugin support out of the box: https://pinia.vuejs.org/core-concepts/plugins.html

Updated Page Architecture
* Smarty template still responsible for rendering menu and header (to be replaced later): https://github.com/pkp/pkp-lib/blob/main/templates/layouts/backend.tpl
* Page has template as part of the component: https://github.com/pkp/ui-library/blob/main/src/pages/submissions/SubmissionsPage.vue
* Page business logic placed in Pinia stores: https://github.com/pkp/ui-library/blob/main/src/pages/submissions/submissionsPageStore.js
* Our Example Page template 
- in Storybook: http://localhost:6007/?path=/docs/pages-example--docs
- Code: https://github.com/pkp/ui-library/tree/main/src/pages/example

More links in the pinned comment!

Upcoming PKP Sprint: https://pkp.sfu.ca/2024/02/01/pkp-sprint-library-publishing-forum-2024/

This is the third in a series of updates from PKP's Development Team. 

Watch past updates: 
November 23 update: https://youtu.be/68s2E9kUfYo
August 23 update: https://youtu.be/LxyBNdQ4XLU?feature=shared
December 22 update: https://www.youtube.com/watch?v=JEJJ1FVpao0&t=0s

Please stay tuned for more PKP Development News Webinars!