Skip to content

AKrutik/rails-optimization-task5

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

11 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Π—Π°Π΄Π°Π½ΠΈΠ΅ β„–5

ЦСли задания

Π’ этом Π·Π°Π΄Π°Π½ΠΈΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ попрактикуСмся с HTTP/2 Π² Rails.

Польза:

  • Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ HTTPS для локального Rails-прилоТСния
  • Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ HTTP/2 reverse proxy с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ server-push
  • Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π΄Π΅Π»Π°Ρ‚ΡŒ server-push, ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ с inlining

ToDo

Π Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π±ΡƒΠ΄Π΅ΠΌ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° dev.to, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ Π·Π°Π΄Π°Π½ΠΈΠΈ.

РСсурсы:

Π¨Π°Π³ 1. ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСртификат для локального HTTPS

МоТно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с использованиСм mkcert

Π¨Π°Π³ 2. НастраиваСм NGinx ΠΊΠ°ΠΊ reverse-proxy

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ NGinx.

ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€ΠΈΡ€ΡƒΠ΅ΠΌ NGinx Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π» https-запросы https://localhost ΠΈ Ρ…ΠΎΠ΄ΠΈΠ» Π² upstream Π½Π° http://localhost:3000.

server {
  listen       443 ssl;
  server_name  localhost;

  ssl_certificate      /path/to/localhost.pem;
  ssl_certificate_key  /path/to/localhost-key.pem;
  ssl_session_timeout  5m;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:DES-CBC3-SHA:!RC4:!aNULL:!eNULL:!MD5:!EXPORT:!EXP:!LOW:!SEED:!CAMELLIA:!IDEA:!PSK:!SRP:!SSLv:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA';
  ssl_prefer_server_ciphers   on;

  location / {
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto https;
    proxy_redirect off;
    proxy_pass http://127.0.0.1:3000;
  }
}

На этом шагС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ https://localhost

Π¨Π°Π³ 3. ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ HTTP/2 ΠΈ server-push

ДополняСм ΠΊΠΎΠ½Ρ„ΠΈΠ³ NGinx ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ HTTP/2 ΠΈ server-push

server {
  listen  443 http2 ssl;
  #...

  location /{
    http2_push_preload on;
    #...
  }
}

Π¨Π°Π³ 4. ΠŸΠΎΡΠΊΡΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с HTTP/2 server-push

На Π³Π»Π°Π²Π½ΠΎΠΌ экранС Π² мобильном Π²ΠΈΠ΄Π΅ dev.to Π΅ΡΡ‚ΡŒ ряд ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ:

  • connect.svg
  • bell.svg
  • menu.svg
  • stack.svg
  • lightning.svg

Screenshot

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈΠ· мСню: connect.svg, bell.svg, menu.svg – Π·Π°ΠΈΠ½Π»Π°ΠΉΠ½Π΅Π½Ρ‹. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ stack.svg ΠΈ lightning.svg – Π½Π΅Ρ‚.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ эту страницу с эмуляциСй ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ соСдинСния ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ рСндСрятся эти ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅.

Π”Π°Π»ΡŒΡˆΠ΅, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ Π΄Π²ΠΈΠ½ΡƒΡ‚ΡŒΡΡ Π² сторону ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° HTTP/2 ΠΈ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΠ½Π»Π°ΠΉΠ½ΠΈΡ‚ΡŒ svg, Π° ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠΌ ΠΈΡ… ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

НапримСр, image_tag("bell.svg", size: "100% * 100%")

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ server-push!

Для этого Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ:

# stories_controller.rb
def index
  push_headers = [
    "<#{view_context.asset_path('bell.svg')}>; rel=preload; as=image",
    "<#{view_context.asset_path('menu.svg')}>; rel=preload; as=image",
    "<#{view_context.asset_path('connect.svg')}>; rel=preload; as=image",
    "<#{view_context.asset_path('stack.svg')}>; rel=preload; as=image",
    "<#{view_context.asset_path('lightning.svg')}>; rel=preload; as=image",
  ]
  response.headers['Link'] = push_headers.join(', ')
  # ...
end

На этом шагС Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ server-push Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Π’ Chrome DevTools Π² ΠΏΠ°Π½Π΅Π»ΠΈ Network Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ запросы ΠΊ этим ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ Π΄Π΅Π»Π°ΡŽΡ‚ΡΡ ΠΏΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΠΊΠΎΠ»Ρƒ h2, Π° Initiator = Push/Other

Π•Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ способ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ server-push - ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Π° http2-push-detect

http2-push-detect https://localhost
Receiving pushed resource: /assets/bell.svg
Receiving pushed resource: /assets/menu.svg
Receiving pushed resource: /assets/connect.svg
Receiving pushed resource: /assets/stack.svg
Receiving pushed resource: /assets/lightning.svg

Π’Π΅ΠΏΠ΅Ρ€ΡŒ поэкспСрСмСнтируйтС, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ server-push для Ρ‚Π΅Ρ… ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈ ΠΎΡ†Π΅Π½ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ это сказываСтся Π½Π° ΠΈΡ… Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π΅.

Π¨Π°Π³ 5. Π˜Π·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ эффСкта сдСланных ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ

Π‘Ρ€Π°Π²Π½ΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ с server-push ΠΈ с ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ Π±Π΅Π· ΠΈΠ½Π»Π°ΠΉΠ½ΠΈΠ½Π³Π° ΠΈ Π±Π΅Π· ΠΏΡƒΡˆΠ°.

Для этого Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ sitespeed.io (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ расскаТу ΠΎΠ± этом ΠΌΠΎΡ‰Π½ΠΎΠΌ инструмСнтС Π² Π»Π΅ΠΊΡ†ΠΈΠΈ β„–6)

5.1 Анализ бСз server-push

Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ Π°Π½Π°Π»ΠΈΠ· вСрсии Π±Π΅Π· server-push ΠΈ Π±Π΅Π· inline:

docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --mobile -n 5 --preUrl https://host.docker.internal/ https://host.docker.internal/

# --mobile - ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄
# -n 5 - 5 ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠ²
# --preUrl https://host.docker.internal/ - ΡƒΡ€Π», ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π·Π°Ρ…ΠΎΠ΄Π°
# https://host.docker.internal/ - ΡƒΡ€Π» ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠ½ΠΎΠ³ΠΎ Π·Π°Ρ…ΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌ
# Π° Π²ΠΎΠΎΠ±Ρ‰Π΅ https://host.docker.internal/ - это https://localhost, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ стоит ваш Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ `HTTP/2-proxy` с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния `docker`.

ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ сгСнСрированный ΠΎΡ‚Ρ‡Ρ‘Ρ‚ sitespeed.io, Π·Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Pages, Ρ‚Π°ΠΌ ΠΏΡ€ΠΎΠ²Π°Π»ΠΈΡ‚Π΅ΡΡŒ Π² ΠΎΡ‚Ρ‡Ρ‘Ρ‚ ΠΏΠΎ СдинствСнной страницС, ΠΈ Π²Π½ΠΈΠ·Ρƒ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ DOWNLOAD HAR - сохранитС HAR-Ρ„Π°ΠΉΠ», Π·Π°ΠΊΠΎΠΌΠΈΡ‚Ρ‚ΡŒΡ‚Π΅ Π΅Π³ΠΎ.

5.2. Анализ с server-push

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Ρ‚ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ Π² ΠΏΡƒΠ½ΠΊΡ‚Π΅ 5.1, Π½ΠΎ с вСрсиСй, Π³Π΄Π΅ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ server-push. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ HAR-Ρ„Π°ΠΉΠ», Π·Π°ΠΊΠΎΠΌΠΈΡ‚Ρ‚ΡŒΡ‚Π΅ Π΅Π³ΠΎ.

5.3 Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ²

Π‘Ρ€Π°Π²Π½ΠΈΡ‚Π΅ Π΄Π²Π° ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Ρ… HAR-Ρ„Π°ΠΉΠ»Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ https://compare.sitespeed.io/

ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ссылку Π½Π° сравнСниС Π² описаниС PR

Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° Waterfall, Ρ‡Ρ‚ΠΎ server-push ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ΡΡ Π² ΡΠ°ΠΌΡƒΡŽ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ.

На filmstrip ΠΈ video Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ server-push ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ Ρ€Π°Π½ΡŒΡˆΠ΅.

Как ΡΠ΄Π°Ρ‚ΡŒ Π·Π°Π΄Π°Π½ΠΈΠ΅

НуТно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ PR Π² этот Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ с вашими измСнСниями ΠΊΠΎΠ΄Π° dev.to для использования server-push, ΠΊΠΎΠ½Ρ„ΠΈΠ³ΠΎΠΌ NGinx, ссылкой Π½Π° сравнСниС HAR-Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ описаниСм.

ЧСклист для сдачи задания

  • РСализация server-push для ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… Π² Π·Π°Π΄Π°Π½ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ
  • ΠšΠΎΠ½Ρ„ΠΈΠ³ NGinx
  • Бсылка Π½Π° сравнСниС HAR-Ρ„Π°ΠΉΠ»ΠΎΠ² с server-push ΠΈ Π±Π΅Π·
  • Бонус 1 ΠΏΡ€ΠΎ dev.to
  • Бонус 2 ΠΏΡ€ΠΎ Falcon

Bonus 1. Аудит dev.to

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Ρƒ вас ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»Π°ΡΡŒ интуиция ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с HTTP/2 ΠΈ server-push, постройтС ΠΈ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΎΡ‚Ρ‡Ρ‘Ρ‚ WebPageTest для сайта dev.to (Π½Π° ΠΏΡ€ΠΎΠ΄Π΅).

Π’ΠΈΠ΄ΠΈΡ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ возмоТности ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ возмоТности HTTP/2 для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ dev.to, исходя ΠΈΠ· ΠΎΡ‚Ρ‡Ρ‘Ρ‚ΠΎΠ² WPT?

Π’ΠΈΠ΄ΠΈΡ‚Π΅ Π»ΠΈ ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ Ρ‚ΠΎΡ‡ΠΊΠΈ роста Π² ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ?

Bonus 2. Falcon HTTP/2

Π‘Π΅Ρ€Π²Π΅Ρ€ Falcon https://github.com/socketry/falcon ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΅Ρ€Π²ΠΈΡ‚ΡŒ Rails-прилоТСния ΠΈ ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ HTTP/2.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ dev.to с server-push для Falcon.

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π±Π΅Π½Ρ‡ΠΌΠ°Ρ€ΠΊ puma ΠΈ falcon Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π³Π»Π°Π²Π½ΠΎΠΉ страницы dev.to.


DEV

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

The Human Layer of the Stack

ruby version rails version Travis Status for thepracticaldev/dev.to Skylight badge CodeTriage badge

Welcome to the dev.to codebase. We are so excited to have you. With your help, we can build out DEV to be more stable and better serve our community.

What is dev.to?

dev.to (or just DEV) is a platform where software developers write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their place within our community. ❀️

Table of Contents

Contributing

We encourage you to contribute to dev.to! Please check out the Contributing to dev.to guide for guidelines about how to proceed.

We expect contributors to abide by our underlying code of conduct. All conversations and discussions on GitHub (issues, pull requests) and across dev.to must be respectful and harassment-free.

Where to contribute

All issues labeled with approved are up for grabs. For clarification on how we label issues, check out their definitions here.

When in doubt, ask a core team member! You can mention us in any issues or ask on the DEV Contributor thread. Any issue with the good first issue tag is typically a good place to start for anyone new to the project. For newer developers, try 'entry-level' issues.

Refactoring code, e.g. improving the code without modifying the behavior is an area that can probably be done based on intuition and may not require much communication to be merged.

Fixing bugs may also not require a lot of communication, but the more the better. Please surround bug fixes with ample tests. Bugs are magnets for other bugs. Write tests near bugs!

Building features is the area which will require the most communication and/or negotiation. Every feature is subjective and open for debate. The product roadmap should be a good guide to follow. As always, when in doubt, ask!

How to contribute

  1. Fork the project & clone locally. Follow the initial setup here.
  2. Create a branch, naming it either a feature or bug: git checkout -b feature/that-new-feature or bug/fixing-that-bug
  3. Code and commit your changes. Bonus points if you write a good commit message: git commit -m 'Add some feature'
  4. Push to the branch: git push origin feature/that-new-feature
  5. Create a pull request for your branch πŸŽ‰

Note: be sure to maintain your fork!

Contribution guideline

Create an issue

Nobody's perfect. Something doesn't work? Or could be done better? Let us know by creating an issue.

PS: a clear and detailed issue gets lots of love, all you have to do is follow the issue template!

Clean code with tests

Some existing code may be poorly written or untested, so we must have more scrutiny going forward. We test with rspec, let us know if you have any questions about this!

Create a pull request

  • Try to keep the pull requests small. A pull request should try its very best to address only a single concern.
  • Make sure all tests pass and add additional tests for the code you submit. More info here
  • Document your reasoning behind the changes. Explain why you wrote the code in the way you did. The code should explain what it does.
  • If there's an existing issue related to the pull request, reference to it by adding something like References/Closes/Fixes/Resolves #305, where 305 is the issue number. More info here
  • If you follow the pull request template, you can't go wrong.

Please note: all commits in a pull request will be squashed when merged, but when your PR is approved and passes our CI, it will be live on production!

How to get help

Whether you are stuck with feature implementation, first-time setup, or you just want to tell us something could be done better, check out our OSS thread or create an issue. You can also mention any core team member in an issue and we'll respond as soon as possible.

πŸ‘‰ OSS Help/Discussion Thread πŸ‘ˆ

The bottom line

We are all humans trying to work together to improve the community. Always be kind and appreciate the need for tradeoffs. ❀️

Codebase

The stack

We run on a Rails backend with mostly vanilla JavaScript on the front end, and some Preact sprinkled in. One of our goals is to move to mostly Preact for our front end.

Additional technologies and services are listed on our docs.

Engineering standards

Style Guide

This project follows thoughtbot's Ruby Style Guide, using Rubocop along with Rubocop-Rspec as the code analyzer. If you have Rubocop installed with your text editor of choice, you should be up and running.

For Javascript, we follow Airbnb's JS Style Guide, using ESLint and prettier. If you have ESLint installed with your text editor of choice, you should be up and running.

Husky hooks

When commits are made, a git precommit hook runs via husky and lint-staged. ESLint, prettier, and Rubocop will run on your code before it's committed. If there are linting errors that can't be automatically fixed, the commit will not happen. You will need to fix the issue manually then attempt to commit again.

Note: if you've already installed the husky package at least once (used for precommit npm script), you will need to run yarn --force or npm install --no-cache. For some reason, the post-install script of husky does not run when the package is pulled from yarn or npm's cache. This is not husky specific, but rather a cached package issue.

Getting Started

This section provides a high-level requirement & quick start guide. For detailed installations, please check out our docs.

Prerequisites

Standard Installation

  1. Make sure all the prerequisites are installed.
  2. Fork dev.to repository, ie. https://github.com/thepracticaldev/dev.to/fork
  3. Clone your forked repository, ie. git clone https://github.com/<your-username>/dev.to.git
  4. gem install foreman
  5. Setup your database
    • Create config/database.yml by copying from the provided template (i.e. cp config/database.yml.sample config/database.yml)
    • Update the config/database.yml file if needed.
  6. Set up your environment variables/secrets
    • Take a look at Envfile. This file lists all the ENV variables we use and provides a fake default for any missing keys. You'll need to get your own free Algolia credentials to get your development environment running.
    • This guide will show you how to get free API keys for additional services that may be required to run certain parts of the app.
    • For any key that you wish to enter/replace:
      1. Create config/application.yml by copying from the provided template (ie. with bash: cp config/sample_application.yml config/application.yml). This is a personal file that is ignored in git.
      2. Obtain the development variable and apply the key you wish to enter/replace. ie:
      GITHUB_KEY: "SOME_REAL_SECURE_KEY_HERE"
      GITHUB_SECRET: "ANOTHER_REAL_SECURE_KEY_HERE"
      
    • If you are missing ENV variables on bootup, envied gem will alert you with messages similar to 'error_on_missing_variables!': The following environment variables should be set: A_MISSING_KEY..
    • You do not need "real" keys for basic development. Some features require certain keys, so you may be able to add them as you go.
  7. Run bin/setup
  8. That's it! Run bin/startup to start the application and head to http://localhost:3000/

View Full Installation Documentation

Docker Installation (BETA)

Our docker implementation is incomplete and may not work smoothly. Please kindly report any issues and any contribution is welcomed!

  1. Install docker and docker-compose
  2. git clone [email protected]:thepracticaldev/dev.to.git
  3. Set environment variables above as described in the "Basic Installation"
  4. run docker-compose build
  5. run docker-compose run web rails db:setup
  6. run docker-compose run web yarn install
  7. run docker-compose up
  8. That's it! Navigate to localhost:3000

Starting the application

We're mostly a Rails app, with a bit of Webpack sprinkled in. For most cases, simply running bin/rails server will do. If you're working with Webpack though, you'll need to run the following:

  • Run bin/startup to start the server, Webpack, and our job runner delayed_job. bin/startup runs foreman start -f Procfile.dev under the hood.
  • alias start="bin/startup" makes this even faster. 😊
  • If you're using pry for debugging in Rails, note that using foreman and pry together works, but it's not as clean as bin/rails server.

Here are some singleton commands you may need, usually in a separate instance/tab of your shell.

  • Running the job server (if using bin/rails server) -- this is mostly for notifications and emails: bin/rails jobs:work
  • Clearing jobs (in case you don't want to wait for the backlog of jobs): bin/rails jobs:clear

Current gotchas: potential environment issues with external services need to be worked out.

Suggested Workflow

We use Spring and it is already included in the project.

  1. Use the provided bin stubs to automatically start Spring, i.e. bin/rails server, bin/rspec spec/models/, bin/rake db:migrate.
  2. If Spring isn't picking up on new changes, use spring stop. For example, Spring should always be restarted if there's a change in environment key.
  3. Check Spring's status whenever with spring status.

Caveat: bin/rspec is not equipped with Spring because it affects Simplecov's result. Instead use bin/spring rspec.

Additional docs

Check out our dedicated docs page for more technical documentation.

Product Roadmap

Our new product roadmap can be found here. Many notes need to be converted to issues but this should provide an overview of features we plan to work on, as well as features we are considering.

Core team members will move issues along the project board as they progress.

  • Ideas & Requests: features up for discussion.
  • Needs Owners: features in need of an owner.
  • Committed: features we're committed to building -- free for contributors to work on, but please communicate with the owner beforehand.
  • In Progress (early stage): work has begun on feature.
  • In Progress (late stage): feature is near completion.

Core team

License

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. Please see the LICENSE file in our repository for the full text.

Like many open source projects, we require that contributors provide us with a Contributor License Agreement (CLA). By submitting code to the DEV project, you are granting us a right to use that code under the terms of the CLA.

Our version of the CLA was adapted from the Microsoft Contributor License Agreement, which they generously made available to the public domain under Creative Commons CC0 1.0 Universal.

Any questions, please refer to our license FAQ doc or email [email protected]


sloan
Happy Coding ❀️

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Ruby 45.9%
  • HTML 24.9%
  • JavaScript 19.0%
  • CSS 10.2%
  • Dockerfile 0.0%
  • Shell 0.0%