Wprowadzenie
Bez względu na to, czy jesteś nowicjuszem w programowaniu, czy już doświadczonym programistą, w tej branży nauka nowych koncepcji oraz języków/frameworków jest koniecznością, aby nadążać za trendami.
Weźmy na przykład React — kod, którego Facebook udostępnił zaledwie cztery lata temu, stał się już numerem jeden wśród programistów JavaScript na całym świecie.
Vue i Angular, oczywiście, również mają swoją wierną bazę fanów. A są jeszcze Svelte oraz inne wszechstronne frameworki, takie jak Next.js czy Nuxt.js. I Gatsby, i Gridsome, i Quasar… i wiele innych.
Jeśli chcesz się wykazać jako doświadczony programista JavaScript, powinieneś mieć przynajmniej pewne doświadczenie z różnymi frameworkami i bibliotekami, oprócz pracy z dobrym, starym JS.
Aby pomóc Ci stać się mistrzem front-endu w 2020 roku, zebrałem dziewięć różnych projektów, z których każdy poświęcony jest innemu frameworkowi i bibliotece JavaScript jako zestawowi technicznemu, który możesz stworzyć i dodać do swojego portfolio. Pamiętaj, że nic nie pomaga Ci bardziej niż praktyczne tworzenie rzeczy, więc idź naprzód, włącz swój umysł i spraw, by to było możliwe.
Artykuł został przetłumaczony przy wsparciu firmy EDISON Software, która , a także .
Aplikacja do wyszukiwania filmów z użyciem React (z hookami)
Pierwsze, od czego możesz zacząć, to stworzenie aplikacji do wyszukiwania filmów z użyciem React. Poniżej znajduje się obrazek przedstawiający, jak będzie wyglądać finalna aplikacja:
Czego się nauczysz
Tworząc tę aplikację, poprawisz swoje umiejętności w React, używając stosunkowo nowego API Hook. W przykładowym projekcie użyto komponentów React, wielu hooków, zewnętrznego API oraz, oczywiście, kilku stylów CSS.
Zestaw technologii i funkcje
- React z hookami
- create-react-app
- JSX
- CSS
Bez użycia jakichkolwiek klas, te projekty dają Ci idealny punkt wejścia w funkcjonalny React i z pewnością pomogą Ci w 2020 roku. Możesz znaleźć . Postępuj zgodnie z instrukcjami lub zrób wszystko po swojemu.
Aplikacja czatu z użyciem Vue
Kolejny świetny projekt dla Ciebie to stworzenie aplikacji czatu, wykorzystując moją ulubioną bibliotekę JavaScript: VueJS. Aplikacja będzie wyglądać mniej więcej tak:
Czego się nauczysz
Z tego przewodnika dowiesz się, jak stworzyć aplikację Vue od podstaw — jak tworzyć komponenty, zarządzać stanem, tworzyć trasy, łączyć się z zewnętrznymi usługami, a nawet zajmować się uwierzytelnianiem.
Zestaw technologii i funkcje
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
To naprawdę świetny projekt, aby rozpocząć pracę z Vue lub poprawić swoje istniejące umiejętności w zakresie programowania w 2020 roku. Możesz znaleźć .
Piękna aplikacja do przeglądania pogody z Angular 8
Ten przykład pomoże Ci stworzyć piękną aplikację do przeglądania pogody przy użyciu Angular 8:
Czego się nauczysz
Ten projekt nauczy Cię cennych umiejętności przy tworzeniu aplikacji od podstaw — od projektowania, poprzez rozwój, aż po gotową do wdrożenia aplikację.
Zestaw technologii i funkcje
- Angular 8
- Firebase
- Renderowanie po stronie serwera
- CSS z siatką i Flexboxem
- Przyjazny dla urządzeń mobilnych oraz responsywność
- Tryb ciemny
- Piękny interfejs
Co naprawdę bardzo mi się podoba w tym kompleksowym projekcie, to że nie uczysz się rzeczy w izolacji. Zamiast tego uczysz się całego procesu rozwoju — od projektowania do finalnego wdrożenia.
Aplikacja To-Do za pomocą Svelte
Svelte to jak nowy gracz w podejściu komponentowym — przynajmniej podobny do React, Vue i Angular. I to jedna z najgorętszych nowinek w 2020 roku.
Aplikacje To-Do niekoniecznie są najgorętszym tematem, ale naprawdę pomogą Ci doskonalić swoje umiejętności w Svelte. Będzie to wyglądać tak:
Czego się nauczysz
Z tego tutorialu nauczysz się, jak stworzyć aplikację przy użyciu Svelte 3, od początku do końca. Będziesz używać komponentów, stylizacji i obsługi wydarzeń.
Zestaw technologii i funkcje
- Svelte 3
- Składniki
- Stylizacja przy użyciu CSS
- Składnia ES 6
Nie ma zbyt wielu dobrych projektów startowych w Svelte, dlatego znalazłem .
Приложение для электронной коммерции с помощью Next.js
Next.js jest najpopularniejszym frameworkiem do tworzenia aplikacji React, które obsługują renderowanie po stronie serwera od ręki.
Ten projekt pokaże Ci, jak stworzyć aplikację e-commerce, która wygląda następująco:
Czego się nauczysz
W tym projekcie dowiesz się, jak programować z użyciem Next.js — jak tworzyć nowe strony i komponenty, pobierać dane oraz stylizować i wdrażać aplikację Next.
Zestaw technologii i funkcje
- Next.js
- Komponenty i strony
- Wybór danych
- Stylizacja
- Wdrożenie projektu
- SSR i SPA
Zawsze miło mieć rzeczywisty przykład, taki jak aplikacja do e-commerce, aby nauczyć się czegoś nowego. Możesz .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js dla Vue to to samo co Next.js dla React: świetny framework do łączenia możliwości renderowania po stronie serwera z aplikacjami jednostronicowymi
Ostatnia aplikacja, którą możesz stworzyć, będzie wyglądać tak:
Czego się nauczysz
W tym przykładzie projektu dowiesz się, jak stworzyć w pełni funkcjonalną stronę internetową za pomocą Nuxt.js — od początkowej konfiguracji do ostatecznego wdrożenia.
Wykorzystuje wiele interesujących funkcji, które oferuje Nuxt, takich jak strony i komponenty, a także stylizację za pomocą SCSS.
Zestaw technologii i funkcje
- Nuxt.js
- Komponenty i strony
- Moduł Storyblock
- Mixiny
- Vuex do zarządzania stanem
- SCSS do stylizacji
- Middleware Nuxt
, który zawiera wiele wspaniałych możliwości Nuxt.js. Osobiście uwielbiam pracować z Nuxt, więc warto spróbować, ponieważ to uczyni cię również doskonałym deweloperem Vue.
Blog z Gatsby
Gatsby to świetny generator statycznych stron, który wykorzystuje React i GraphQL. To wynik projektu:
Czego się nauczysz
W tym przewodniku dowiesz się, jak używać Gatsby do stworzenia bloga, który będziesz używać do pisania własnych artykułów, wykorzystując React i GraphQL.
Zestaw technologii i funkcje
- Gatsby
- React
- GraphQL
- Wtyczki i motywy
- MDX/Markdown
- Bootstrap CSS
- Szablony
Jeśli kiedykolwiek chciałeś założyć bloga, jak go stworzyć, używając React i GraphQL.
Nie mówię, że WordPress jest złym wyborem, ale z Gatsby możesz tworzyć wydajne strony internetowe, używając React — co jest niesamowitą kombinacją.
Blog z Gridsome
Gridsome dla Vue… Cóż, mieliśmy to już z Next/Nuxt.
Jednak to samo dotyczy Gridsome i Gatsby. Obydwa używają GraphQL jako warstwy danych, ale Gridsome wykorzystuje VueJS. To także niesamowity generator stron statycznych, który pomoże ci tworzyć świetne blogi:
Czego się nauczysz
Ten projekt nauczy cię, jak stworzyć prostego bloga, aby rozpocząć pracę z Gridsome, GraphQL i Markdown. Zawiera również informacje o tym, jak wdrożyć aplikację przez Netlify.
Zestaw technologii i funkcje
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
To oczywiście nie jest najbardziej kompleksowy samouczek, ale obejmuje podstawowe pojęcia Gridsome i .
Odtwarzacz audio podobny do SoundCloud z użyciem Quasar
Quasar to kolejny framework Vue, który można wykorzystać do tworzenia aplikacji mobilnych. W tym projekcie stworzysz aplikację odtwarzacza audio, na przykład:
Czego się nauczysz
Podczas gdy inne projekty koncentrują się głównie na aplikacjach internetowych, ten pokaże Ci, jak stworzyć aplikację mobilną z wykorzystaniem Vue i frameworka Quasar.
Musisz mieć już działającą Cordova z skonfigurowanym Android Studio/Xcode. Jeśli nie, w instrukcji znajduje się link do strony Quasar, na której pokazują, jak wszystko skonfigurować.
Zestaw technologii i funkcje
- Quasar
- Vue
- Cordova
- WaveSurfer
- Komponenty UI
, demonstrujący możliwości Quasar w tworzeniu aplikacji mobilnych.
Źródło: habr.com
