Frontend -> Fullstack

Список материалов и данных необходимых для того чтобы стать полноценным Fullstack программистом. Навык помеченный !!! в начале - обязателен к изучению

Basics

!!! Shell scripts and basic linux commands
- Basic commands
  - http://mally.stanford.edu/~sr/computing/basic-unix.html
- Operator chaining
  - https://www.tecmint.com/chaining-operators-in-linux-with-practical-examples/
!!! Brew
- https://brew.sh
!!! Tmux
- https://hackernoon.com/a-gentle-introduction-to-tmux-8d784c404340
!!! Vim
- https://www.tutorialspoint.com/vim/vim_getting_familiar.htm
- https://www.openvim.com/
Your OWN github repository with .tmux.conf, .vimrc, etc.
- https://github.com/aiboy/terminal-env
OSI Model (https://en.wikipedia.org/wiki/OSI_model)
- Layer 7: Application layer
  - !!! HTTP
    - HTTP Spec
      - https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
    - HTTP status codes
      - https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
  - !!! HTTP/2
    - https://en.wikipedia.org/wiki/HTTP/2
  - !!! SMTP
    - https://en.wikipedia.org/wiki/SMTP
  - !!! NTP (network time protocol)
    - https://en.wikipedia.org/wiki/Network_Time_Protocol#SNTP
- Layer 6: Presentation layer
  - Telnet
    - https://en.wikipedia.org/wiki/Telnet
- Layer 5: Session layer
  - SOCKS
    - https://en.wikipedia.org/wiki/SOCKS
- Layer 4: Transport layer
  - !!! TCP, Transmission Control Protocol
    - https://en.wikipedia.org/wiki/Transmission_Control_Protocol
  - !!! UDP, User Datagram Protocol
    - https://en.wikipedia.org/wiki/User_Datagram_Protocol
- Layer 3: Network layer
  - IPv4/IPv6, Internet Protocol
    - https://en.wikipedia.org/wiki/Internet_Protocol
    - https://en.wikipedia.org/wiki/IPv4
    - https://en.wikipedia.org/wiki/IPv6
- Layer 2: Data link layer
  - Ethernet
    - https://en.wikipedia.org/wiki/Ethernet
- Layer 1: Physical layer
  - Bluetooth physical layer
  - Ethernet physical layer
  - USB physical layer
!!! Web Server vs Application Server vs Web Sites & Services
- !!! Web Servers
  - !!! Nginx
    - https://en.wikipedia.org/wiki/Nginx
  - !!! Apache
    - https://en.wikipedia.org/wiki/Apache_HTTP_Server
  - IIS (Microsoft Windows only)
    - https://en.wikipedia.org/wiki/Internet_Information_Services
- Application Server
  - https://en.wikipedia.org/wiki/Application_server
- Web Sites & Services
  - РHP, Node.js, Java, .Net, Go.. etc.
Methodoligies of development
- Waterflow
  - https://en.wikipedia.org/wiki/Waterfall_model
- V Model
  - https://en.wikipedia.org/wiki/V-Model_(software_development)
- !!! Agile
  - !!! Head First - Agile book (must read!!!)
  - Scrum
  - Kanban
  - Lean

Requirements Gathering Stage

Terms of reference / Техническое задание (ТЗ)
Expected Load
- Ожидаемая нагрузка на сервер (10 RPS - 10 Reqest Per Second)
Service quality requirements
- Uptime
- Backups
Hardware Requirements
- Запрос нужного железа (серверов или cloud)
- Заказываем исходя из Expected Load
User Stories (Agile)
Persormance Budget
- Frontend
  - Maximun Bundle Size
  - TTI, TTFB, FMP, TTFI
- Backend
  - Minimum Response Time
  - Minumum RPS
MVP
- https://en.wikipedia.org/wiki/Minimum_viable_product
Estimation
- https://en.wikipedia.org/wiki/Software_development_effort_estimation

Design Stage (самая первая стадия - проектирование, сбор требований)

Server deployment
- Low level deployment strategies
  - FTP/SFTP
    - https://www.jetbrains.com/help/webstorm/creating-a-remote-server-configuration.html
  - rsync
    - https://habr.com/sandbox/37102/
  - Github
    - Позволякет деплоить с помощью Git Push
    - https://gist.github.com/oodavid/1809044
  - Debianization
    - Позволяет деполоить с помощью apt-get install в Lunux
    - https://wiki.debian.org/HowToPackageForDebian
- Types of servers (by time)
  - Development server
  - Testing server
  - Staging server
  - Production server
- Types of servers (by location)
  - !!! Localserver (localhost - 127.0.0.1)
  - !!! LAN (hostname - 0.0.0.1:80)
  - Web hosting service (https://en.wikipedia.org/wiki/Web_hosting_service)
    - One Click Install
      - https://infobox.ru/hosting/wordpress/
    - !!! Shared web hosting service
      - Старнадртные мини сервера для PHP
      - https://infobox.ru/hosting/linux/
    - !!! Virtual Dedicated Server / Virtual Private Server (VPS)
      - https://en.wikipedia.org/wiki/Virtual_private_server
    - !!! Dedicated hosting service
      - https://selectel.ru/services/dedicated/
    - Colocation web hosting service
      - Почти как Dedicated только вмес
    - Cloud hosting
      - Infrastructure as a service (IaaS)
        
        https://en.wikipedia.org/wiki/Infrastructure_as_a_service
      - Platform as a service (PaaS)
        
        https://en.wikipedia.org/wiki/Platform_as_a_service
      - Software as a service (SaaS)
        
        https://en.wikipedia.org/wiki/Software_as_a_service
      - Mobile "backend" as a service (MBaaS)
        
        https://en.wikipedia.org/wiki/Mobile_backend_as_a_service
      - Serverless computing
        
        https://en.wikipedia.org/wiki/Serverless_computing
      - Function as a service (FaaS) / Serverless Apps
        
        https://en.wikipedia.org/wiki/Function_as_a_service
    - Clustered hosting
    - Grid hosting
    - Home server
DBA (data base architecture)
- !!! Normalization Forms
  - https://en.wikipedia.org/wiki/Database_normalization
- !!! CAP theorem
  - https://en.wikipedia.org/wiki/CAP_theorem
- Types
  - !!! SQL (relational model)
    - https://en.wikipedia.org/wiki/Relational_model
    - https://en.wikipedia.org/wiki/SQL
  - !!! NoSQL
    - https://en.wikipedia.org/wiki/NoSQL
  - NewSQL
    - https://en.wikipedia.org/wiki/NewSQL
- Database Migration
  - http://vaidehijoshi.github.io/blog/2015/05/19/the-secret-life-of-your-database-part-1-migrations/
Arhetecture Styles
- Default Styles
  - !!! REST
    - https://en.wikipedia.org/wiki/Representational_state_transfer
  - !!! RPC
    - https://en.wikipedia.org/wiki/Remote_procedure_call
  - GraphQL
    - https://graphql.org/
    - https://www.apollographql.com/ (поддерживает подписки)
- Push styles
  - HTTP/2
    - https://en.wikipedia.org/wiki/HTTP/2_Server_Push
  - Commet
    - https://en.wikipedia.org/wiki/Comet_(programming)
  - WebSockets
    - https://en.wikipedia.org/wiki/WebSocket
Communication with Frontend
- Same-origin policy problem
  - Description of problem
    - https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
  - !!! CORS
    - !!! Cors In Action book (must read!)
    - https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
  - JSONP (устарело)
    - https://en.wikipedia.org/wiki/JSONP
  - Iframe Comunication
    - PostMessage
      - https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
    - Iframe hack (устраело - use CORS)
      - https://github.com/oyvindkinsey/easyXDM
Approaches
- Monolit (архитектура 1 сервера)
- Miscroservices
  - https://blog.newrelic.com/technology/microservices-what-they-are-why-to-use-them/
  - https://12factor.net/ru/
!!! Policy Review & Licence Review
- !!! Check that framework & Library have good licence (never use GPL!!!)
- !!! Apache v2 is dangeraous (Trademark use)
  - https://tldrlegal.com/
  - https://choosealicense.com/licenses/
Web Arhitecture
- Example
  - https://engineering.videoblocks.com/web-architecture-101-a3224e126947
- Load Balancers
- Database Servers / Database Clusters
- CDN
- Caching Servers
- Job Queue Servers
- Full test search Servers
- Services
- Storage Server / Cloud Storage
Risks
- Backpressure
  - https://medium.com/@jayphelps/backpressure-explained-the-flow-of-data-through-software-2350b3e77ce7
Scalability
- Horizontal and vertical scaling
UML
- Types
  - Class Diagrams
  - Sequence Diagrams
  - Activity Diagrams
  - State diagram
- Tools
  - PlantUML
  - StarUML
  - StarUML -> JSweet -> Typescript
Design Patters
- Gang of 4 book
- https://sourcemaking.com/design_patterns
- HeadFirst - Design patterns
CI (Continuos Integration)
- Jenkins
  - https://www.tutorialspoint.com/jenkins/jenkins_quick_guide.htm

Development Stage (разработка)
- VCS (Version Control Systems)
  - !!! Git
    - !!! git-flow
    - Commit Message Styleguide
      - https://www.conventionalcommits.org/en/v1.0.0-beta.2/
      - https://gist.github.com/abravalheri/34aeb7b18d61392251a2#generating-changelogmd
    - Auto CHANGELOG generation
      - https://github.com/conventional-changelog/standard-version
  - Subservion (SVN)
  - Mercurial
  - Concurrent Versions System (CVS)
- Text Editors
  - VIM
  - Emacs
  - Visual Studio Code
  - WebStorm / PHPStorm / PyCharm
  - Eclipse
- Linters
  - ESLint
  - TSLint
- Code formatters
  - Prettier
  - CSSComb
- Bootstraping
  - Example Github repository
  - Angular CLI
  - Vue CLI
  - Create React App
  - yeoman
  - slush
- Scaffolding
  - Angular CLI Schematics
  - Vue CLI plugins (Generator)
    - https://cli.vuejs.org/dev-guide/plugin-dev.html#generator
  - Redux CLI
  - Plop
- Testing
  - Frameworks
    - Mocha/Chai
    - Jasmine
    - Jest
  - Tests Runners
    - Karma
    - Jest
- Reactoring
  - Code Smeels
    - https://sourcemaking.com/refactoring/smells
  - Refactoring techniques
    - https://sourcemaking.com/refactoring/refactorings

Test Stage (тестирование)
- E2E test
  - Cypress.io
    - https://www.cypress.io/
  - Protractor
    - https://www.protractortest.org/#/
  - Nightwatch
    - http://nightwatchjs.org/
  - Puppetear
    - https://github.com/GoogleChrome/puppeteer
  - Selenium
    - https://www.seleniumhq.org/
- Regression Testing
- Acceptence Tests

Staging Stage (подготовка к релизу, выкатка в окружение похожее на production)
- Load testing (нагрузочное тестирование)
  - About correct load testing
    - https://www.digitalocean.com/community/tutorials/an-introduction-to-load-testing
  - Tool: artilery (мой любимый)
    - https://artillery.io/
  - Tool: ab
    - https://stackoverflow.com/questions/12732182/ab-load-testing
  - Tool: Apache JMeter
    - https://en.wikipedia.org/wiki/Apache_JMeter
  - Tool: Gatling
    - https://en.wikipedia.org/wiki/Gatling_(software)
- OWASP Security Test
  - https://www.owasp.org/index.php/Web_Application_Security_Testing_Cheat_Sheet

Deployment Stage (выкатка в production окружение)
- Highlevel deployment strategeis
  - https://thenewstack.io/deployment-strategies/
  - http://blog.itaysk.com/2017/11/20/deployment-strategies-defined
  - https://github.com/ContainerSolutions/k8s-deployment-strategies
- Backup (https://en.wikipedia.org/wiki/Backup)
  - Data repository models
    - Unstructured
    - Full only / System imaging
    - Incremental
    - Differential
    - Reverse delta
    - Continuous data protection
  - Storage Media
    - Magnetic tape
    - Hard disk
    - Optical storage
    - SSD/Solid state storage
    - Remote backup service AKA cloud backup
    - Floppy disk and its derivatives
- Rollback Strategies
  - https://www.ebayinc.com/stories/blogs/tech/zero-downtime-instant-deployment-and-rollback/
- Database Migration

Maintainance Stage
- Loggin
  - !!! Log rotation (можно делать как внешними иструментами так и средствами самого Web приложения)
  - Logstash, Kibana, ElasticSearch
- Monitoring
  - Graphana
  - Emails
- Debugging
  - Profiling
  - Core dump
- Reports
- Web Analitics
  - https://marketingplatform.google.com/about/
- SEO

Frontend2Fullstack
Frontend2Fullstack copied to clipboard

Metadata

Frontend -> Fullstack

Basics

Requirements Gathering Stage

Design Stage (самая первая стадия - проектирование, сбор требований)

← Metadata

Owner

Metadata

Frontend2Fullstack Frontend2Fullstack copied to clipboard

Metadata

Frontend -> Fullstack

Basics

Requirements Gathering Stage

Design Stage (самая первая стадия - проектирование, сбор требований)

← Metadata

Owner

Metadata

Frontend2Fullstack
Frontend2Fullstack copied to clipboard