Wprowadzenie
Niezależnie od tego, czy dopiero zaczynasz programować, czy jesteś doświadczonym programistą, nauka nowych koncepcji i języków/frameworków jest w tej branży koniecznością, aby nadążać za trendami.
Weźmy na przykład React, który Facebook udostępnił jako open source zaledwie cztery lata temu i już stał się numerem jeden wśród programistów JavaScript na całym świecie.
Oczywiście Vue i Angular również mają swoją własną, legalną rzeszę fanów. Jest też Svelte i inne uniwersalne frameworki, takie jak Next.js czy Nuxt.js. I Gatsby, Gridsome i Quasar... i wiele więcej.
Jeśli chcesz sprawdzić się jako doświadczony programista JavaScript, powinieneś mieć przynajmniej trochę doświadczenia z różnymi frameworkami i bibliotekami - oprócz pracy ze starym, dobrym JS.
Aby pomóc Ci zostać mistrzem front-endu w 2020 roku, przygotowałem dziewięć różnych projektów, każdy skupiający się na innym frameworku i bibliotece JavaScript jako stos technologii, który możesz zbudować i dodać do swojego portfolio. Pamiętaj, że nic nie pomaga Ci bardziej niż faktyczne tworzenie rzeczy, więc idź do przodu, użyj swojego umysłu i spraw, aby tak się stało
Artykuł został przetłumaczony przy wsparciu firmy EDISON Software, która a także .
Aplikacja do wyszukiwania filmów za pomocą React (z hakami)
Pierwszą rzeczą, od której możesz zacząć, jest utworzenie aplikacji do wyszukiwania filmów za pomocą React. Poniżej znajduje się obraz tego, jak będzie wyglądać ostateczna aplikacja:
Czego się nauczysz
Budując tę aplikację, udoskonalisz swoje umiejętności Reagowania, korzystając ze stosunkowo nowego API Hooks. Przykładowy projekt wykorzystuje komponenty React, mnóstwo hooków, zewnętrzne API i oczywiście trochę stylizacji CSS.
Stos technologii i funkcje
- Reaguj hakami
- Utwórz aplikację reagującą
- JSX
- CSS
Bez użycia żadnych klas, projekty te stanowią doskonały punkt wejścia do funkcjonalnego Reacta i na pewno pomogą Ci w 2020 roku. możesz znaleźć . Postępuj zgodnie z instrukcjami lub stwórz własny.
Aplikacja do czatowania z Vue
Kolejnym świetnym projektem, który możesz wykonać, jest stworzenie aplikacji do czatowania przy użyciu mojej ulubionej biblioteki JavaScript: VueJS. Aplikacja będzie wyglądać mniej więcej tak:
Czego się nauczysz
W tym samouczku dowiesz się, jak stworzyć aplikację Vue od podstaw – tworzyć komponenty, obsługiwać stan, tworzyć trasy, łączyć się z usługami stron trzecich, a nawet obsługiwać uwierzytelnianie.
Stos technologii i funkcje
- Vue
- vuex
- Vue router
- Widok CLI
- Popychacz
- CSS
To naprawdę świetny projekt, aby rozpocząć pracę z Vue lub udoskonalić swoje istniejące umiejętności, aby rozpocząć programowanie w 2020 roku. możesz znaleźć .
Piękna aplikacja pogodowa z Angular 8
Ten przykład pomoże Ci stworzyć piękną aplikację pogodową przy użyciu Angular 8:
Czego się nauczysz
Ten projekt nauczy Cię cennych umiejętności tworzenia aplikacji od podstaw - od projektu, przez rozwój, aż do aplikacji gotowej do wdrożenia.
Stos technologii i funkcje
- Kątowy 8
- Ognisko
- Renderowanie po stronie serwera
- CSS z Gridem i Flexboxem
- Przyjazny dla urządzeń mobilnych i możliwości dostosowania
- Tryb ciemny
- Piękny interfejs
To, co naprawdę podoba mi się w tym wszechstronnym projekcie, to to, że nie studiuje się rzeczy w izolacji. Zamiast tego uczysz się całego procesu programowania, od projektu po końcowe wdrożenie.
Aplikacja To-Do wykorzystująca Svelte
Svelte jest nowym dzieckiem w podejściu komponentowym - przynajmniej podobnym do React, Vue i Angular. A to jedna z najgorętszych nowości na rok 2020.
Aplikacje To-Do niekoniecznie są najgorętszym tematem, ale naprawdę pomogą Ci udoskonalić umiejętności Svelte. Będzie to wyglądać tak:
Czego się nauczysz
Ten samouczek pokaże Ci, jak od początku do końca stworzyć aplikację przy użyciu Svelte 3. Będziesz używać komponentów, stylów i procedur obsługi zdarzeń
Stos technologii i funkcje
- Smukły 3
- Components
- Stylizacja za pomocą CSS
- Składnia ES 6
Nie ma zbyt wielu dobrych projektów startowych Svelte, więc znalazłem .
Aplikacja e-commerce korzystająca z Next.js
Next.js to najpopularniejszy framework do tworzenia aplikacji React, które od razu obsługują renderowanie po stronie serwera.
W tym projekcie dowiesz się, jak stworzyć aplikację e-commerce wyglądającą tak:
Czego się nauczysz
W tym projekcie dowiesz się, jak programować za pomocą Next.js — tworzyć nowe strony i komponenty, wyodrębniać dane oraz stylizować i wdrażać aplikację Next.
Stos technologii i funkcje
- Next.js
- Komponenty i strony
- Próbkowanie danych
- Stylizacja
- Wdrożenie projektu
- SSR i SPA
Zawsze wspaniale jest mieć przykład z prawdziwego świata, np. aplikację e-commerce, aby nauczyć się czegoś nowego. Możesz .
Pełnoprawny wielojęzyczny blog z Nuxt.js
Nuxt.js jest dla Vue, tym czym Next.js jest dla React: świetna platforma do łączenia mocy renderowania po stronie serwera i aplikacji jednostronicowych
Ostateczna aplikacja, którą możesz utworzyć, będzie wyglądać następująco:
Czego się nauczysz
W tym przykładowym projekcie dowiesz się, jak utworzyć kompletną witrynę internetową przy użyciu Nuxt.js, od początkowej konfiguracji do końcowego wdrożenia.
Korzysta z wielu fajnych funkcji, które ma do zaoferowania Nuxt, takich jak strony i komponenty oraz stylizacja za pomocą SCSS.
Stos technologii i funkcje
- Nuxt.js
- Komponenty i strony
- Moduł Storyblock
- Śluzica
- Vuex dla zarządzania państwem
- SCSS do stylizacji
- Oprogramowanie pośrednie Nuxt
, który zawiera wiele wspaniałych funkcji Nuxt.js. Osobiście uwielbiam pracować z Nuxtem, więc powinieneś spróbować, ponieważ dzięki temu staniesz się także świetnym programistą Vue.
Bloguj z Gatsbym
Gatsby to doskonały generator stron statycznych wykorzystujący React i GraphQL. Oto efekt projektu:
Czego się nauczysz
W tym samouczku dowiesz się, jak używać Gatsby'ego do tworzenia bloga, którego będziesz używać do pisania własnych artykułów przy użyciu React i GraphQL.
Stos technologii i funkcje
- Gatsby
- React
- GraphQL
- Wtyczki i motywy
- MDX/przecena
- Bootstrap CSS
- Szablony
Jeśli kiedykolwiek chciałeś założyć bloga, o tym, jak to zrobić za pomocą React i GraphQL.
Nie mówię tego WordPress to zły wybór, ale dzięki Gatsby możesz tworzyć wydajne witryny przy użyciu React — co jest niesamowitym połączeniem.
Bloguj z Gridsome
Gridsome dla Vue... OK, już to mieliśmy z Next/Nuxt.
Ale to samo dotyczy Gridsome'a i Gatsby'ego. Obydwa używają GraphQL jako warstwy danych, ale Gridsome używa VueJS. Jest to także niesamowity generator stron statycznych, który pomoże Ci tworzyć świetne blogi:
Czego się nauczysz
W ramach tego projektu dowiesz się, jak stworzyć prosty blog, aby rozpocząć pracę z Gridsome, GraphQL i Markdown. Omówiono także sposób wdrażania aplikacji poprzez Netlify.
Stos technologii i funkcje
- Porażający
- Vue
- GraphQL
- Obniżka cen
- Netlifikuj
Z pewnością nie jest to najbardziej kompleksowy samouczek, ale obejmuje podstawowe pojęcia dotyczące Gridsome i .
Odtwarzacz audio podobny do SoundCloud wykorzystujący Quasar
Quasar to kolejny framework Vue, który można wykorzystać do tworzenia aplikacji mobilnych. W tym projekcie utworzysz aplikację odtwarzacza audio, na przykład:
Czego się nauczysz
Podczas gdy inne projekty skupiają się głównie na aplikacjach internetowych, ten pokaże Ci, jak stworzyć aplikację mobilną przy użyciu Vue i frameworku Quasar.
Powinieneś już mieć działającą Cordovę z skonfigurowaną wersją Android Studio/Xcode. Jeśli nie, w przewodniku znajduje się link do strony Quasar, gdzie pokazano, jak wszystko skonfigurować.
Stos technologii i funkcje
- Quasar
- Vue
- Cordova
- FalaSurfer
- Komponenty interfejsu użytkownika
, demonstrując możliwości Quasara w zakresie tworzenia aplikacji mobilnych.
Źródło: www.habr.com
