Технологи 2019 оны 12 сарын 21

Вэб програмчлал – 2020

Нийтэлсэн: Admin

Вэб интернетийн хамгийн чухал хэсэг бөгөөд хурдтай өөрчлөгдөн хувьсаж буй салбар. Энэ салбар ирэх жил ямар чиг хандлагатай байх талаар дараах таамаглалуудыг судлаачид дэвшүүлж байна.

Чи яагаад код судлах хэрэгтэй гэж?

  • Компанид орж хөгжүүлэгчээр ажиллах
  • Зөвлөх болох
  • Хувиараа ажиллах буюу өөрийн компани, бизнесийг эхлүүлэх
  • Апп юм уу SAAS (програмын үйлчилгээ) эхлүүлэн мөнгө олох
  • Зүгээр л хобби

Вэб хөгжүүлж сурахад юу хэрэгтэй вэ?

  • Компьютер
  • Текст эдитор/IDE: VSCode, Sublime Text, Visual Studio, Eclipse
  • Вэб браузер: Chrome, Firefox
  • Терминал: Bash, Zsh, Powershell, Git Bash, iTerm, Hyper
  • Дизайн: Adobe XD, Photoshop, Sketch, Figma

Юун түрүүнд сурах зүйлс

  • HTML5
  • CSS суурьтай болох хэрэгтэй
  • CSS Grid & Flexbox
  • CSS custom properties
  • CSS Transitions

Үүний дараа Responsive Design хийж сурах хэрэгтэй

  • Viewport
  • Media queries
  • Fluid widths
  • px нэгжийн оронд rem нэгж хэрэглэх
  • Mobile First арга барилыг баримтлах хэрэгтэй

Custom дахин хэрэглэж болох CSS component үүсгэж, хэрэглэх

SASS бол CSS-ын илүү дэвшилтэт хувилбар гэсэн үг. Үүнийг ашигласнаар:

  • CSS дотор хувьсагч зарлаж, дахин ашиглаж болно
  • Nesting
  • Conditionals хийх боломжтой

CSS Frameworks

Өнгөрсөн жилүүдийг бодвол арай ийшээ хошуурахаа больсон ч өргөн хэрэглэгдсээр л байгаа. Үүний тоонд:

  • Bootstrap
  • Tailwind CSS
  • Materialize
  • Bulma

Vanilla JavaScript

  • Эхлээд суурь ойлголтуудыг нь эзэмших хэрэгтэй. Дараа нь:
  • DOM (Document Object Model)
  • JSON (JavaScript Object Notation)
  • Fetch API
  • Modern JS (ES6)

Дараагийн багажууд

  • Git & GitHub
  • Browser Dev tools
  • VS Code extensions
  • Emmet
  • NPM or Yarn
  • Axios
  • Webpack of Parcel

Deployment-ын тухай ойлголтууд

  • Домэйн хаяг худалдаж авах, бүртгүүлэх
  • Managed hosting (InMotion, Hostgator, Bluehost etc)
  • Static hosting (Netlify, GitHub pages)
  • SSL Certificate
  • FTP, SFTP (File Transfer protocol)
  • SSH (Secure Shell)
  • CLI & Git

Үүний дараа Frontend-ээр явах уу, Backend-ээр цааш явах уу гэдгээ шийднэ

Frontend-ээр дагнах бол: JavaScript Frameworks үзнэ (React, Vue, Angular)

Backend: PHP, Python, C#, Go etc

JavaScript frameworks (аль нэгээр нь дагна)

Фрэймворкууд хүчирхэг ганц хуудаст аппууд хөгжүүлэх боломж өгнө. Үүнд:

  • React – Хамгийн өргөн түгсэн нь | Сурахад хэцүү биш
  • Vue – Сүүлийн үед их дэлгэрч байгаа | Сурахад хамгийн амархан нь
  • Angular – Том байгууллагууд илүү хэрэглэдэг | Сурахад хамгийн хэцүү нь

Svelte

Хүмүүс үүнийг фрэймворк гэж боддог боловч тийм биш. Энэ зүгээр л JS compiler. Давуу тал нь:

  • Бага код бичнэ
  • Ямар ч виртуал ДОМ ашигладаггүй
  • Маш хурдан
  • Гэхдээ үүгээр дээрх гурван гол фрэймворкийг орлуулах гэж оролдох хэрэггүй. Жижиг төслүүдэд илүү тохиромжтой.

State management

Том аппуудад 3 дагч талын хөгжүүлсэн тусгай стэйт менежерүүд хэрэг болдог. Гэсэн ч эдгээр багажуудын хэрэгцээ улам бүр багасаж байна.

  • React – Redux, Context API with Hooks
  • Vue – Vuex
  • Angular – NGRX, Services
  • Apollo Client

Server Side Rendering

Сервер дээр хуудас угсарна гэсэн үг. NEXT (React), NUXT (Vue) ашиглан хуудсуудыг сервер дээр угсарч болно. Энэ нь SPA-гээс өөр хандлага гэсэн үг. Давуу тал нь:

  • SEO сайжирна
  • File System Routing
  • Автоматаар code splitting хийнэ
  • Static Exporting
  • CSS in JS

Static Site Generators

Gatsby (React), Gridsome (Vue) нар статик сайт үүсгүүрүүдийн жишээ билээ. Gatsby вэб хуудсууд маш хурдан байдаг.

  • Мэдээж илүү сайн SEO
  • File System Routing
  • Өгөгдлийг угсрах үед локал файлуудаас татаж авна
  • Плагин систем
  • Өгөгдөлдөө GraphQL ашиглана

TypeScript

JS-ыг статик type-тай болгосон нэмэлт хувилбар. Том төслүүдэд ашигтай ч жижиг, дунд хэмжээний төслүүдэд тийм ч шаардлагатай биш.

  • Static Typing: vars, functions, etc
  • Tooling support with IntelliSense
  • Modules, Decorators, Classes
  • Цэвэр JS код болон компайлдагддаг. TS файлууд .ts өргөтгөлтэй байдаг бол компайлдсаны дараа .js өргөтгөлтэй болон хадгалагддаг.

Server-Side Хэл (нэгийг нь сонго)

Fullstack юм уу Backend хөгжүүлэгч болохын тулд чи серверын талын програмчлалын хэл, технологи эзэмших ёстой. Үүнд:

  • Node.js – маш хурдан. Нэг thread-тэй. JS фронтэндтэй ажиллаж буй үед сервер нь бас JS байвал хоорондоо холбогдох нь илүү хялбар. Энэ тал дээр MERN, MEVN зэрэг стакууд бий.
  • Python – Машин сургах, AI гээд өөр олон газар хэрэглэгддэг.
  • PHP – Хүмүүс шүүмжилдэг ч хувиараа бизнес хийхэд хялбар. Хаана ч сервер олдоно. Улам дажгүй болж байгаа.
  • C#
  • Ruby – Компаниуд улам бүр энэ хэлнээс холдож, орхиж байгаа.
  • GoLang – Маш сонирхолтой хэл. Компайлддаг хэл. Маш хүчирхэг. Вэбээс гадна өөр олон зүйлд ашиглаж болно. Хурдан өсөж байгаа. REST API -г энэ хэл дээр ашиглахад маш амархан.
  • Java – Old school гэсэн үг. Том компаниудад илүү хэрэглэгддэг. Шинэ стартапууд хэрэглэх нь бага.
  • Rust – нэлээн шинэлэг хэл. Бинарын хэл. Үүнийг WebAssembly-тэй холбож хэрэглэж болно.

Өгөгдлийн бааз (нэгийг нь сонго)

Ихэнх вэбүүд хаа нэгтээ өгөгдөл хадгалах хэрэгтэй болдог. Олон янзын өгөгдлийн бааз бий:

  • Харьцаат өгөгдлийн баазууд: PostgreSQL, MySQL, MS SQL
  • NoSQL: MongoDB, RethinkDB, CouchDB
  • Cloud database: Firebase, Azure, AWS
  • Хөнгөхөн, каш: Redis, SQLlite, NeDB

Холбоотой мэдээнүүд