Cílem tohoto článku je vytvoření seznamu mých nejlepších osvědčených užitečných knihoven pro vývoj webů.
Webpack Encore
https://github.com/symfony/webpack-encore
Integrace Webpacku do webové aplikace (včetně těch starších psaných třeba v PHP nebo Pythonu). Náhrada za Gulp. Rychlý vývoj se zapnutým Hot Module Replacement (není třeba dávat po kžadé úpravě F5 v prohlížeči, změny kódu se projeví automaticky v prohlížeči během pár sekund).
Encore překompiluje TypeScript soubory do JavaScript a SASS(případně starší Less) do CSS souborů,cesty k souborů se zapíšou do entrypoints.json a manifest.json, z nich mi aktuální cesty (liší se dev a production) automaticky linkuje PHP skriptík do HTML šablon.
TypeScript
https://www.typescriptlang.org/
TypeScript je plně kompatibilní s JavaScript, přidává do JS syntaxi pro typy, velice usnadňuje vývoj webů tam, kde je třeba mít složitější objekty. Jako základ používám TS interface pro všechny objekty, do kterých tahám data přes axios. V parametrech funkcí a návratové hodnotě vždy uvádím typ. Více o Typescript píšu v článku Jak přidat Typescript do Vue.js 2.6 projektu.
Vue.js 2.6
Framework Vue.js 2.6 už není sice nejnovější (existuje Vue.js 3), ale jako základ pro tvorbu webů mi zatím postačuje. Pages a Components píšu v TypeScript, abych mohl používat šikovné věci, jako jsou types a interfaces.
vue-property-decorator
https://github.com/kaorun343/vue-property-decorator
Dekorátor pro komponenty (Component), props (Prop).
Vuex 3
https://vuex.vuejs.org/
Vuex store používám včetně modules (modulů).
vuex-module-decorators
https://github.com/championswimmer/vuex-module-decorators
Pro usnadnění přidávání Vuex modulů používám dekorátory „vuex-module-decorators“ (je to přehlednější kód).
vuex-class
https://www.npmjs.com/package/vuex-class
Pro vazbu modulů v komponentách používám dekorátory „vuex-class“ (umožní pracovat se store stejně jako bych použil data přímo v komponentě, dá se později přesunout data do store).
VueRouter
Oficiální router pro Vue. Umí routovat url do „views“ (kontrolerů) přes klasické url (history mode) nebo jen hash, umí zanořené adresy.
vuelidate (Vue plugin)
Validace formulářů.
v-idle
https://github.com/malekim/v-idle
Plugin pro práci s aktivitou/neaktivitou uživatelů. Sleduje hýbání myši, klikání apod.
testing-library
npm install –save-dev @testing-library/vue
V testu vyrendereuju komponentu a pomoci metody getByText testuju, zda se napr. zobrazuje tlacitko s urcitym textem.
@vue/composition-api
npm install @vue/composition-api -D
Plugin Vue 3 do Vue 2. Používám defineComponent, lze definovat komponenty stejně jako ve Vue 3, používat setup() atd.