Skip to content

Frontend Development Stack

Jump to bottom
Vadim Dyachkov edited this page Mar 11, 2020 · 8 revisions

Frontend Development Stack

What

  • Фронтенд фреймворк, который будет ходить к нашему серверу за данными по REST/gRPC/GraphQL, отображать их пользователю и позволять редактировать настройки
  • Данные:
    • Админка для настройки параметров работы поиска дубликатов
    • Список PR к отслеживаемым проектам
    • Отображнеие графа заимствований кода для каждого PR
    • Отображение diff между несколькими PR по клику на дугу в графе заимствований
    • ...
  • Поддержка авторизации
  • Простая ролевая модель
    • Для админа - read-write права
    • Для остальных - read-only права

Language

JavaScript

  • Interpreted (JIT-compiled) programming language
  • ECMAScript standard
  • The only scripting language for Web pages

TypeScript

  • Typed superset of JavaScript that compiles to plain JavaScript

Summary

The obvious choice in favor of a typed language - TypeScript.

Frameworks

jQuery

  • Библиотека для манипуляции элементами DOM-дерева и организации запросов
  • Не полноценный UI-фреймворк в отличии от React-Angular-Vue
  • Придется использовать server-side rendering
  • Много низкоуровеных манипуляций на уровне DOM-дерева
  • Есть мнение, что технология умирает
  • Не модно в 2к20

Angular

  • Поддерживается компанией Google
  • Самый старый из тройки React-Angular-Vue
  • Довольно тяжеловесная библиотека
  • Сложнее, чем React и Vue
  • Есть Dependency Injection
  • Не использует Virtual DOM (потенциально худший perfomance)

React

  • Поддерживается компанией Facebook
  • Самый популярный по Google Trends (больше готовых решений и примеров)
  • Позволяет комбинировать разметку и JS-код
  • Отличный тулинг: react-developer-tools, create-react-app, ...
  • Один человек в команде имел опыт работы с React

Vue

  • Не поддерживается крупными корпорациями
  • Самый молодой из тройки React-Angular-Vue
  • В каком-то смысле собрал лучшее из Angular и React
  • Недостаточно популярен в сравнении с конкурентами

Summary

Google Trends

На самом деле, можно выбрать любой фреймворк и реализовать UI на нем. Но, ввиду большей популярности, хорошему тулингу и предыдущему опыту работы, предлагается сделать выбор в пользу React.

Package manager

npm

  • More popular
  • Battle-tested
  • Had experience with npm

Yarn

  • Newer than npm
  • Fixes a lot of npm's issues
  • Easier to use
  • Caches dependencies
  • Faster than npm due to parallel operations

Summary

Let's use a nice and fancy package manager - Yarn.

Build system

webpack

  • De-facto standard in the frontend world

react-scripts

  • Preconfigured and hidden webpack + balel for React applications

Summary

For React-based applications react-scripts is more convenient and easier to use.

Libraries

Graph visualization

Code diff

Home

Clone this wiki locally