JavaScriptové knihovny ulehčují vytváření složitých aplikací. Zde jsou některé z nejužitečnějších knihoven pro použití v letech 2021/2022.
Jakmile dokončíte „Hello World!“. ‘ a pochopíte, jak JavaScript funguje, pravděpodobně se budete chtít ponořit do vytváření něčeho užitečnějšího – webu, služby nebo mobilní aplikace.
Všechny mají mnoho pohyblivých částí – Autentizace, aby se uživatelé mohli přihlásit, podpora databáze pro ukládání dat, nahrávání souborů, aby si uživatelé mohli ukládat obrázky svých koček do databáze – to vše jsou složité systémy, jejichž vývoj vyžaduje čas a úsilí.
Všechny jsou si také velmi podobné, bez ohledu na to, jaký druh aplikace vytváříte. Přihlašovací systém pro nákupní web se ve skutečnosti neliší od přihlašovacího systému pro web sociálních médií. Požádají o uživatelské jméno a heslo a přihlásí vás.
Tam jsou knihovny přijďte. Poskytují funkce pro všechny ty nudné věci, takže můžete trávit čas skutečným vytvářením svého projektu.
Zde jsou některé z knihoven JavaScriptu, které jsme používali v našich projektech v roce 2021 (a budeme je používat i v roce 2022). Ušetřily nám hodiny času na vývoj, takže stojí za to je vyzkoušet!
Ověření Node.js – Passport.js
https://www.passportjs.org/
Passport.js přidává ověřování do aplikací Node.js. Ve spojení s webovým rámcem Express.js můžete během okamžiku spustit web nebo webovou službu, kterou lze ověřit.
Databáze Node.js / ORM – Sequelize
https://sequelize.org/
Sequelize dokáže víc než jen připojit vaši aplikaci Node.js k databázi – poskytuje také funkci ORM (Object Relational Mapping).
Zkrátka; velmi usnadňuje práci s databázovými záznamy. Vše je abstrahováno od nezpracovaných SQL dotazů – místo toho definujete své modely, propojíte je s tabulkou a poté se zabýváte modely ve vašem kódu. Vytvořte, aktualizujte a odstraňte objekty a změny se projeví v databázi.
Použití ORM je nutností pro složité aplikace.
Mapování – Leaflet.js
https://leafletjs.com/
Leaflet.js se integruje s několika online mapovacími službami. Může se těchto služeb dotázat na adresu nebo souřadnice a poté zobrazit mapu. Přidejte body, tlačítka nebo navigaci pomocí jednoduchého rozhraní API.
Je lehký a podporuje mnoho pluginů, pokud jsou vyžadovány další funkce.
Komentování – Commento
https://commento.io/
Commento vám umožňuje připevnit systém komentářů na téměř jakoukoli webovou stránku. Hostujte server komentářů, vložte JavaScript tam, kam potřebujete, aby bylo pole pro komentáře umístěno, a je hotovo.
Platby – proužek
https://stripe.com/docs/libraries
Stripe neuvěřitelně zjednodušuje přijímání plateb online. Jsou zaměřeny na vývojáře a poskytují všechny nástroje potřebné k integraci plateb do vaší služby nebo aplikace.
Dokumentace je solidní a pokrývá použití pro různé platformy, včetně JavaScriptu (jak na straně klienta, tak na straně serveru).
Funkce nápovědy – Lodash &Underscore.js
https://lodash.com/
https://underscorejs.org/
Lodash a Underscore.js poskytují hromadu dalších funkcí pro Javascript.
Jsou to spořiče v reálném čase nebo prostě užitečné – například:
- Funkce pro vyhledávání a sumarizaci polí
- Odcházející vstup
- Generování náhodného vstupu a jedinečných ID
- Kontrola typů proměnných
- Mnohem více
Obě knihovny dělají podobné věci, takže pravděpodobně nepotřebujete obě – vyberte si jednu podle svých potřeb.
Animace – anime.js
https://animejs.com/
Anime.js je knihovna pro pohyb věcí na obrazovce. Animujte cokoli – grafy, pohyblivý text, obrázky – jakýkoli prvek na obrazovce lze posouvat, roztahovat, měnit měřítko a otáčet.
Uživatelský vstup – Cleave.js
https://nosir.github.io/cleave.js/
Uživatelé jsou nespolehliví. Mačkají klíče, píšou slova tam, kde mají být čísla. Mayhem.
Cleave.js vynucuje vstup uživatele do vstupních formulářů HTML.
Nechcete, aby uživatel zadával písmena do číselného vstupu? Cleave.js bude ignorovat jakýkoli vstup, který není číslo.
Chcete si přečíst e-mailovou adresu? Cleave.js zajistí, že uživatel zahrnul symbol @.
Šikovné.
Budování rozhraní – Vue.js
vue
Vue.js je frontendová knihovna a framework pro přidávání interaktivity na stránky pomocí HTML, CSS a JavaScriptu.
V zásadě vám umožňuje měnit obsah stránky HTML, aniž byste ji museli znovu načítat. Toho lze využít k dynamickému načítání obsahu a je zásadní pro vytváření jednostránkových aplikací – aplikací, které donekonečna posouvají obsah nebo načítají obrázky z miniatur, aniž by museli přecházet na jinou adresu URL nebo obnovovat stránku.
Vue.js je skvělý, protože se na něj můžete spolehnout tak málo nebo tolik, kolik chcete. Vytvořte si celou webovou aplikaci ve Vue nebo ji jen tu a tam použijte tam, kde chcete přidat nějaký dynamický obsah.
Čas a datum – Moment.js
https://momentjs.com/
Zacházení s daty, časy, časovými pásmy a regionální formátování data a času bylo tradičně noční můrou.
Moment.js to všechno usnadňuje. Transponujte časy napříč časovými pásmy, převádějte z jednoho formátu data do jiného nebo zobrazujte čas uživatelům na základě jejich polohy.
Ušetří vám to pár vrásek.
Obkladové obklady/zdivo – macy.js
http://macyjs.com/
Umístění řad obrázků různých velikostí na obrazovku se může zdát jako jednoduchý úkol, ale není.
Různé velikosti obrazovky, změna velikosti oken, změna orientace obrazovky – to vše vyvolává problémy, když se snažíte, aby se obrázky zobrazovaly v uspořádané mřížce.
macy.js to řeší elegantně. Existují i jiné možnosti, ale tato je podle mě nejproblematičtější.
Karousel obrázků – Slick
https://kenwheeler.github.io/slick/
‚Poslední kolotoč, který kdy budeš potřebovat‘ – souhlas.
Prohlížeč obrázků na celou obrazovku
https://dimsemenov.com/plugins/magnific-popup/
Zobrazujte obrázky ve vyskakovacím okně na celé obrazovce s přiblížením a navigací v galerii. Je jich spousta z knihoven, které to dělají, a myslím, že tato je nejlepší.
Vyskakovací okna – SweetAlert2
https://sweetalert2.github.io/
Zbavte se těch ošklivých vyskakovacích oken/upozornění v prohlížeči JavaScriptu a použijte místo toho Sweetalert2.
(Pojmem vyskakovací okna nemyslím otravné reklamy – mám na mysli způsoby zobrazování oznámení, zpráv o úspěchu a upozornění)
Uživatelský vstup WYSIQWYG – Summernote
https://summernote.org/
Možná budete chtít, aby vaši uživatelé mohli zadávat více než jen prostý text. Blogové příspěvky by jinak byly docela nudné.
Summernote poskytuje úplný editor formátovaného textu „co vidíte-je-co-získáte“ – výstup HTML, který se uloží do backendu.
K dispozici je celá škála formátování textu HTML – od tučného/kurzíva/podtrženého textu po použití různých písem, horního indexu, dolního indexu atd.
Díky vloženým videím, obrázkům, tabulkám a dalším prvkům na YouTube a Vimeo je to nejlepší možnost, jak uživatelům umožnit odesílat bohatý obsah.
Vstup uživatele – rozevírací seznamy – výběr2
https://select2.org/
Rozbalovací seznamy jsou skvělé, ale ve skutečnosti nejsou užitečné, jakmile se seznam možností rozroste o více než tucet. Něco tak jednoduchého, jako je rozbalovací nabídka, ve které si uživatel může vybrat svou zemi, je nepříjemná – je toho hodně k procházení.
Select2 to řeší tím, že poskytuje prohledávatelná a přizpůsobitelná výběrová pole, která mohou dokonce načíst seznam možností ze vzdáleného serveru na základě toho, co uživatel píše. Skvělé!
Vstup data a času – Flatpickr
https://flatpicr.js.org/
Umožněte svým uživatelům vybrat datum/čas z rozhraní kalendáře. Vypadá profesionálně a neguje uživatele, kteří si neúmyslně vybrali špatné datum nebo čas kvůli regionálním rozdílům.
Formát vybraného data/času lze určit tak, aby odpovídal vašemu back-endu, což vám také usnadní život.
Rozvržení – Bootstrap
https://getbootstrap.com/
Bootstrap je primárně knihovna CSS – obsahuje prvky, jako jsou tlačítka a okraje, stejně jako rozvržení mřížky a formátování textu – ale má také komponentu JavaScript, která přidává věci, jako jsou modální vyskakovací a rozevírací nabídky.
Je to nutnost, pokud chcete dobře vypadající aplikaci hned teď a chcete se později starat o svou značku.