​​Логические операторы JavaScript

В JavaScript, как и во многих других языках, есть логические операторы для объединения различных условий. В этом посте закрепим эту тему, рассмотрим как они применяются и изучим некоторые нюансы.

Не будем опускаться до всяких базовых вещей типа записи комплексных условий. Но для галочки запишу пример:

if (x > 0 && (y === 2 || y === 7)) {
 doSomething()
}

Сегодня будем говорить о чём-то более интересном.

1. Всего операторов три: &&, ||, !
2. Преобразовать значение к типу boolean быстро можно, используя двойное отрицание.

let name = "Denis"
let age
let obj = { age }

!!name // true
!!age // false
!!obj // true

3. Оператор || возвращает первое истинное значение.

const name = "Denis" || "Max" || undefined
// name = "Denis"

4. Оператор && возвращает первое ложное значение.

const age = 20 && '' && null
// age = ''

5. Операторы || и && можно использовать вместо if.

let x, y

true && (x = 2)
true || (y = 10)

// x = 2
// y = undefined

Это первое, что приходит в голову на эту тему.

Спасибо за прочтение, это важно для меня ❤️

#web #javascript #theory

​​Преобразование строки в число

Хочу, кстати, рассказать об интересном и неявном способе преобразовать строку в число в JavaScript. Речь идет о плюсике. Об обычном плюсике, да. Выглядит это так:

const string = "20"
const num = +string
const num2 = 10 + +string
// num = 20
// num2 = 30, не ошибка

Коротко и со смыслом мне кажется, ведь на этом, по сути, и правда всё.

Спасибо за прочтение, это важно для меня ❤️

#web #theory #javascript

​​Оператор объединения с null '??'

Относительно новая замена оператору || в быту разработчика. Рассмотрим вот такую ситуацию:

С сервера приходит адрес пользователя, который может быть null либо undefined. В таком случае, обработать этот кейс можно так:

const state = (json.city !== null && json.city !== undefined) ? json.city : "default"

Какая-то совсем страшная кроказябра написана сверху, не так ли?

А можно записать вот так:

const state = json.city ?? "default"

Оператор ?? возвращает первый аргумент, если он не null/undefined, иначе второй. В этой ситуации это однозначно спасает ситуацию и делает код более читаемым.

И кто-то заметит, что вместо ?? можно использовать ||. А вот и нет. Такая ситуация:

Что если в вышепредставленном json есть поле score. Оно либо ноль, либо null/undefined.

Смотрим код:

// json.score = 0

json.score || 1000 // 1000
json.score ?? 1000 // 0

Оператор ?? работает только с null и undefined, а || также обрабатывает falsy-значения.

На этом всё. Спасибо за прочтение, это важно для меня.

#web #theory #javascript

​​Что такое Spread и Rest операторы и в чём их отличие

Итак, Rest оператор — это оператор, который позволяет собрать лишние аргументы. Сразу на примере:

function foo(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

foo(1, 2, 3, 4, 5, 6);

// a, 1
// b, 2
// manyMoreArgs, [3, 4, 5, 6]

В объявлении функции мы используем Rest оператор, который собирает все оставшиеся поданные в функцию аргументы в массив.

Spread оператор, в свою очередь, не применяется как способ развернуть один объект в другой:

const arr1 = [1, 2]
const arr2 = [4, 5]
const arr3 = [...arr1, 3, ...arr2]

// arr3, [1, 2, 3, 4, 5]

Так же это работает не только с массивами, но и, например, с объектами.

Разница Spread и Rest оператора заключается конечно же в том, какой результат выполнения они имеют. Но можно заметить, что они имеют одинаковый синтаксис (...). Отсюда сделаем замечание, что:

— Rest оператор применяется только в объявлении функции с целью создания коллекции аргументов.
— Spread оператор применяется во всех остальных случаях.

На этом у меня всё. Спасибо за прочтение, это важно для меня ❤️

#web #theory #javascript

​​Что такое нечистый объект

Информации нет в интернете, кстати. Не знаю почему, но видел этот вопрос только на тестовом собеседовании, а вот в интернете ответа просто нет. Эксклюзив, получается 🙂

Итак, понятие "нечистый объект" появляется в контексте клонирования объекта. Нечистым объектом называется тот объект, который внутри себя содержит ссылки на себя же.

Пример:

const obj = {
 foo: 1, 
 bar: obj
}

или

const obj = {
 foo: 1, 
 bar: {
  obj.x
 },
 x: obj.bar
}

Тут объект ссылается сам на себя, из-за чего при копировании код будет завершаться переполнением стека вызова.

На этом всё. Спасибо за прочтение, это важно для меня ❤️

#web #theory #javascript

​​Какой объект называется итерабельным

Сегодня поговорим о том какой объект называется итерабельным, а именно, какой объект можно проитерировать при помощи цикла for..of.

У любого итерабельного объекта в JavaScript присутствует специальный ключ [Symbol.Iterator]. По этому ключу доступен генератор, который предоставляет для итерации значения. Подробнее о работе генераторов я расскажу в другой раз.

Следовательно, чтобы сделать объект неитерабельным, необходимо удалить это свойство.

И в целом на этом всё. Спасибо за прочтение, это важно для меня ❤️

#web #theory #javascript

​​Откуда методы у примитивов

В JavaScript, как и в других языках, есть примитивы, подробнее тут, но что это в целом такое? Когда мы записываем конструкцию типа:

const year = 2021

Мы не создаём объект, мы просто задаём числовое значение переменной. Но при этом, у этого примитива доступны методы. Так как же?

Дело в том, что интерпретатор JavaScript в рантайме создаёт конструкторы-обёртки над примитивами. Я думаю все знают, что для каждого примитива существуют соответствующие классы типа Number, String...

Так вот, например, такой код:

year.toString()

Будет на деле исполняться как:

new Number(year).toString()

Мы создаём объект примитива на основе примитивного значения и у полученного объекта вызываем методы.

На этом у меня всё. Спасибо за прочтение, это важно для меня ❤️

#web #theory #javascript

​​Абсолютный и относительный путь

Два понятия из мира файловых систем. Сейчас разберемся что это такое.

Абсолютный путь — полный путь до файла в файловой системе.

Windows:
C:\Program Files\Internet Explorer\iexplorer.exe

UNIX: 
/Users/denisputnov

Относительный путь — путь до файла в файловой системе относительно исполняемого файла.

Как пример, возьмём папку рабочего стола в Unix-системах:

При запуске терминала я оказываюсь в папке /Users/denisputnov. Чтобы зайти в папку рабочего стола я могу написать cd ./Desktop или cd Desktop. Тут я использую относительный путь. Или могу использовать абсолютный и записать команду как cd /Users/denisputnov/Desktop

В этом и заключается вся разница.

В последнее время немного выгорел от постов через день. Постараюсь выпускать посты чаще, но пока всё достаточно печально в этом вопросе 🙂

В любом случае, спасибо за прочтение, это важно для меня ❤️

#useful

​​Что такое БЭМ

БЭМ — методология разработки, созданная в Яндексе. Это компонентный подход написания HTML и CSS, который подразумевает разделение интерфейса на независимые блоки.

Вообще, БЭМ, — это далеко не единственная методология разработки, но на данный момент она, наверное, самая модная в рамках СНГ. Часто знание БЭМ требуется даже от джунов.

Описывать сам БЭМ я не буду, да это и не имеет смысла. На официальном сайте есть очень классное руководство, я не напишу лучше.

Разберёмся, скорее, почему БЭМ и действительно ли нужно его учить.

И моё субъективное мнение заключается в том, что учить нужно. Там всё равно ничего сложного, а знать для общего круга полезно, тем более что это знание, как минимум, делает вас конкурентным на рынке труда.

Я использую БЭМ и люблю его. Мне нравится этот подход разбиения на составляющие, потому что во многом это упрощает понимание кода и упрощает его поддержку. Так же, что важно, код становится переиспользуемым. Многие блоки проще перемещать со страницы на страницу или дублировать на одной странице, приходится писать меньше кода.

В моём опыте использования не было ничего плохого, что было бы связанно с БЭМ, поэтому всем советую.

На этом всё. Спасибо за прочтение, это важно для меня ❤️

#web #theory #useful

​​Шпаргалка по пинципам ООП.

Один из самых частовстречающихся вопросов по ООП с собеседований. Разберёмся в этой теме кратко, такого ответа чаще всего хватит интервьюеру.

1. Наследование.

Наследование — механизм, который позволяет описать новый класс на основе существующего, то есть родительского. При этом свойства и функциональность родительского класса заимствуются новым классом.

В первую очередь это используется для переиспользования уже написанного кода, что должно упростить и ускорить разработку. Классы строятся друг на друге, что выстраивает чёткую иерархию.

2. Абстрация.

Абстрация — выделение главного. Суть заключается в выделении только самого главного и абстрагировании от незначительного. Например, у класса Auto мы создадим поля, например, fuel, mark, age, engine, а от поля lightsColor абстрагируемся, так как для нашей задачи это не важно.

3. Инкапсуляция.

Это скрытие чего либо, ограничения доступа к данным и к возможности их изменения. Как пример — код от учетной записи. Если записать его на листочке и повесить его на монитор, то любой «пользователь», севший за компьютер, получит к ней доступ и сможет поменять пароль. Так же для пользователя выглядят публичные переменные класса.

Инкапсуляция же сделает данные недоступными извне либо только для изменения, либо для любых операция в целом.

4. Полиморфизм.

Полиморфизм — возможность работать с разными типами данных, не зависимо от этого, получая подобный результат. Чтобы лучше понять о чем речь, рассмотрим такой код:

class Person {
 say() {
   console.log("I'm nobody")
  }
}

class Programmer extends Person {
 say() {
   console.log("I'm programmer")
  }
}

class Director extends Person {
 say() {
   console.log("I'm director")
  }
}

У объектов классов Person, Programmer и Director, одинаковый интерфейс взаимодействия. При том, что они имеют разные типы, поведение подобное. Это и есть смысл полиморфизма.

И на этом в целом всё. Спасибо за прочтение, это важно для меня ❤️

#web #theory #javascript

​​Как только будет время

Постов нет 158 дней, я не против ставить новые рекорды.

Канал не то чтобы заброшен, но времени на него нет, это правда.

Последний пост вышел 7 октября 2021 года, в момент, когда я устраивался на работу. Думал, что устроюсь и возобновлю посты, но времени не хватало и до сих пор не хватает совершенно. В одно и то же время мне пришлось работать, учиться в вузе, продолжать учиться программированию и, хотя бы раз в неделю, жить. Оказалось, что это не так просто.

С момента прекращения выхода постов, из канала ушло почти 100 человек. Это нормально, потому что мертвые чаты тоже нужно чистить. И классно, что ушли не все. Согласно аналитике канала, 99.1% подписчиков было в сети в последние сутки, и просмотры на постах растут каждый день, так что я надеюсь, что вы не просто забыли о существовании этого канала.

Будет ли что-то дальше? Конечно будет. Не совсем понимаю когда и как, но я часто думаю о том, в каком формате мне было бы удобно продолжить писать. Есть несколько идей, я постараюсь разобраться в них как можно быстрее. Мне нравится писать. Ты можешь написать мне какой контент для тебя актуален в личку или сделай это анонимно через гугл формы. Если у тебя есть подобные мысли, то мне было бы очень интересно их почитать или послушать.

Забавно, что постов после перерывов было так много, что можно вводить отдельный хэштег.

​​Что со мной произошло вообще

Под хэштегом #blog хочу рассказать что со мной произошло за эти 158 дней с момента последнего поста.

Я не терял время просто так, не пропил его, не потратил на 100 уровней в какой-то игре, а, как мне кажется, потратил его с пользой для себя.

— Работа, конечно же
Я устроился как Junior Software Engineer в NetCracker на стеке React, TypeScript, Redux, работаю я уже 5 месяцев. За это время мой кругозор и скилл, как мне кажется, увеличились кратно. Забавно, что в эту компанию не берут джунов с рынка без внутренних курсов. Для меня сделали исключение, это приятно.

— Пет-проекты
Я много работал помимо основной работы. Моё кладбище заброшенных проектов больше, чем у гугла, кстати. Но хотя бы один проект я довел до какого-то логического конца, им я поделюсь чуть позже, ведь туда можно даже контрибьютить. Раньше я думал, что без пет-проектов учиться просто нереально сложно. Сейчас я понимаю, что это не сложно, это просто невозможно. Если вы до сих пор сидите в ловушке гайдов на ютубе, то лучшее, что вы можете сделать — закрыть гайд и создать новый репозиторий на GitHub.

— Курсы The Rolling Scopes Community
Начались вчера. Курсы, по сути, от EPAM, хоть им и очень хочется отвязаться от имени компании. Пока что для уровня Junior, а позже перезачислюсь на уровень Middle. В этом я, кажется, уже уверен. Курсы для меня сейчас — просто способ пробежаться по основам, обменяться опытом с разработчиками ниже и выше уровня, чем я. Начались они крайне спонтанно, как, в целом, и всё лучшее в моей жизни.

— Doka
Open Source Front-End документация на русском языке. Я не пишу в канал, но накидываю заготовки туда. В целом, контрибьютить туда максимально просто, так что думаю, что в ближайшее время я появлюсь в авторах и там.

Думаю, что это основные вехи за последнее время. Есть ещё что рассказать, но это уже не так значимо.

И прочтение для меня правда важно, спасибо.

Искренне о важном​

Я думаю многие заметили, что этот канал уже давно не пополнялся записками сумасшедшего. Я как-то выходил за связь, в попытке восстановить в себе привычку писать, но у меня не получилось, это стоит открыто признать)

На данный момент у меня готово некоторое количество постов наперед и я планирую запускать канал снова. Сделать всё чуть более серьезно и методично. Зарекаться о постоянном выходе постов тут не в моих силах, хотя очень хотелось бы, но я просто не хочу давать несдерживаемых обещаний. Даже не для читателя скорее, а для себя. Я уверен, что больше половины актуальных подписчиков откроют канал и в ту же секунду закроют его, а некоторые и отпишутся после напоминания о его существовании, но меня это не особо волнует.

С момента выхода последнего поста, я чуть ли не каждый день думал о канале и об утерянных возможностях, связанных с ним. Но, в своё оправдание скажу, что я просто выгорел. Мне не хватило мотивации продолжать, потому что в какой-то момент моя жизнь превратилась в 16-ти часовую работу семь дней в неделю и я был готов жертвовать чем угодно. Мне оказалось слишком тяжело совмещать постоянную работу, образование, пет-проекты, менторинг, учёбу в ВУЗе и кучу других активностей, поэтому канал попал под горячую руку с целью сохранить всё остальное. Так расставились приоритеты.

Канал пришлось исключить из повседневной жизни просто из-за того, что он мне ничего не приносит. Размер его слишком мал, чтобы быть частью личного бренда. Рекламу я не публикую. А с читателями удаётся пообщаться так редко, что эмоциональной отдачи мне не хватает. Поэтому если вы реально читаете это, напишите мне, пожалуйста)

За этот перерыв мне удалось многое обдумать, многое потерять, изменить и приобрести, но уверенности в стабильной активности канала точно нет.

И всё же, я не зря терял время. У меня появился новый опыт и куча новых знаний. Контента накопилось столько, что уже сейчас заготовленных постов должно хватить как минимум на 2 месяца. Подход к каналу я кардинально изменил и оптимизировал настолько, насколько сейчас способен. Даже удалось делегировать какие-то активности и теперь над этим каналом буду стараться не я один, чему я несказанно рад. На конечном контенте это не должно сказаться, зато времени от написания поста до его публикации должно проходить гораздо меньше.

За время моего отсутствия, с канала ушла чуть ли не половина подписчиков. Вполне справедливо. Но мне приятно видеть, что ещё многие остаются. Скорее всего, большинство просто забыли о существовании этой части мой души в сети. Но спасибо вам за ожидание и за прочтение этого поста. Эта фраза после каждого поста, типа «Это важно для меня» — это не просто красивая концовка. Правда важно, спасибо.

#blog

Что такое полифилы и зачем они нужны

Одна из главных проблем web-разработки — скорость поддержки инструментов. И речь не об обновлении фреймворков или библиотек, а об обновлении браузеров.

Достаточно долгое время многим разработчикам в кошмарах снился прекрасный и ужасный Internet Explorer, что в последнее время, к слову, закончилось (зато теперь у нас есть Safari).

Браузеры не одинаковы. Большинство из них работают на хромиуме, но всё же единого стандартного решения нет, из-за чего какие-то функции, например, JavaScript, поддерживаются в одних браузера, но не поддерживаются в других или работают иначе.

Весь этот ужас усугубляется тем, что некоторые пользователи отключают автоматические обновления и используют давно неактуальные версии браузеров.

Так ли всё ужасно? Не совсем.

Есть автоматизированные инструменты поддержки, и относительно длительное время существует прекрасный концепт полифилов.

Полифил — это код, который, используя старые возможности языка, эмулирует новые, перезаписывая прототип.

Пример полифила для метода some:

if (!Array.prototype.some) {
  Array.prototype.some = function(callback) {
    for (var i = 0; i < this.length; i++) {
      if (callback(this[i], i, this)) {
        return true;
      }
    }
    return false;
  };
}

То есть если в прототипе массива нативного метода some нет, мы добавим собственную его реализацию.

Автоматически полифилы можно добавить в свой код при использовании разных инструментов сборки, например Babel.

Babel позволяет вам написать код, использующий новые возможности JavaScript, и затем автоматически транспиллировать его в код, который будет работать на старых версиях браузера.

Есть множество уже готовых шаблонов подобных проектов, но даже настройка подобного инструмента с нуля достаточно проста.

Ну и на этом у меня в принципе всё. Спасибо за прочтение, это важно для меня ❤️

#web #theory #javascript

Аутентификация и авторизация

Понятия, которые достаточно часто путают из-за созвучности и кажущегося сходства значения. Но на самом деле это не совсем так и важно разобраться в чём же разница.

Аутентификация — процесс, который позволяет системе идентифицировать пользователя. Обычно это ввод пары логина и пароля, номер телефона и код доступа из смс, отпечатки пальцев, лица и так далее. Это способ определить, что с системой работает не аноним, а конкретный Иван Иванов.

Авторизация — процесс, который всегда идёт после аутентификации, и определяет роли и права доступа для пользователя. Например, в одном приложении может быть разный набор функций для обычных пользователей, менеджеров, администраторов. Процесс авторизации определяет имеет ли Иван Иванов доступ к функциям администратора на основе его роли.

Если ещё раз кратко, то аутентификация определяет с кем конкретно работает система, а авторизация — что этот конкретный пользователь может.

И на этом, кстати, всё. Это достаточно простое понятие 🙂

Спасибо за прочтение, это важно для меня ❤️

#useful #web #theory

Big O notation

Каждый алгоритм можно оценить по времени и по памяти. При этом, не совсем понятно, как объективно составить эту оценку. Для решения этого вопроса существует O notation.

Это серьезный математически термин, который позволяет установить порядки сравнения поведения функций.

Когда речь идёт об оценке алгоритма по времени, то интересующая нас функция — отношение количества данных к времени выполнения алгоритма. При оценке по памяти — отношение количества данных к объёму занимаемой памяти, соответственно.

Рассмотрим примеры некоторых оценок по сложности:

— Константная сложность O(1)
Константная сложность по времени гласит «Вне зависимости от объема данных, скорость выполнения неизменна»

В коде это, например, обращение к объекту по ключу. Вне зависимости от размера объекта, значение по ключу доступно с константной сложностью.

— Линейная сложность O(n)
Алгоритм линейной сложности по времени — такой алгоритм, время выполнения которого прямо пропорционально объёму данных. Например, это метод reduce

[1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0)

— Квадратная скорость O(n^2)
То есть время выполнения есть квадрат объёма данных. Это может быть тот же reduce, но примененный уже не для массива, а для матрицы, то есть это работа цикла внутри другого цикла.

matrix.reduce((acc, cur) => 
 acc + cur.reduce((acc, cur) => acc + cur, 0), 0)

Этот код найдет сумму всех элементов матрицы.

Если же говорить об оценке по времени, то оценки могут быть такими же по величине, что и по сложности, то есть O(1), O(n)…

Рассмотрим пример, где сложность алгоритма по памяти — O(n):

const countElements = (arr) => {
 const counts = {}
 
 for (let i = 0; i < arr.length; i++) {
  const key = arr[i] 
  if (counts[key]) {
   counts[key] += 1
  } else {
   counts[key] = 1
  }
 }

 return counts
}

В этом коде размер объекта counts может расти прямо пропорционально длине массива, потому что каждого из элементов массива может быть представлен в единственном экземпляре. Размер входных параметров при оценке по памяти не учитывается.

Также стоит помнить, что при оценке алгоритма мы отбрасываем константы. То есть алгоритм сложностью O(3n) на самом деле равняется O(n), и так далее.

Оценок гораздо больше тех, о которых я могу рассказать в рамках одного поста. Подробнее о видах оценок можно посмотреть тут.

Спасибо за прочтение, это важно ❤️

#theory #useful

Что такое AJAX​

До появления этой технологии, все обновления на странице могли быть видны только после её перезагрузки в браузере. Зачастую просто из-за того, что динамики на сайтах было мало, и все страницы сайта хранились на сервере и отдавались как обычная статика. Но со временем web-приложения становились всё более интерактивными и динамичными.

AJAX — Asynchronous JavaScript and XML — технология, которая решает проблему частой перезагрузки страницы, позволяет выполнять все запросы и реагировать на них асинхронно из JavaScript кода.

Самым явным примером приложений, которые стали в принципе возможными, после внедрения AJAX — сервисы гугла.

Благодаря асинхронным запросам у нас есть, например, Google Maps или Gmail, работу которых без асинхронных обработчиков представить крайне сложно. Пользователь может увидеть обновленные данные сразу же после своего действия и выполнения запроса, что даёт лучший пользовательский опыт и расширяет возможности web-приложений.

В современном мире часто используют fetch или что-то вроде axios, но изначально AJAX стал возможен из-за реализации в языке объекта XMLHttpRequest. Типичный запрос выглядит вот так:

// создаем запрос
var xhr = new XMLHttpRequest();

// инициализируем
xhr.open("GET", "https://...", true);

// обрабатываем ответ
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

// отправляем
xhr.send();

Спасибо за прочтение, это важно для меня ❤️

#web #theory

Что такое PWA?​

PWA — Progressive Web Application — это веб-приложение, которое использует современные веб-технологии для создания приложения, которое может работать как настольное приложение. Оно может быть установлено на устройство пользователя и иметь доступ к некоторым функциям устройства.

PWA приложения имеют возможность:
— Работать в офлайн режиме
— Работать в фоновом режиме
— Отправлять нативные уведомления на устройство
— Получать доступ в геолокации, камере, микрофону, контактам, файловой системе устройства, различным сенсорам (таким, как, например, гироскоп)

Также важной особенностью PWA приложений является скорость их работы, загрузки, и в целом более качественный пользовательский опыт, поскольку в таком подходе у разработчиков есть чуть больше инструментов для грамотного кеширования. Из-за этого приложение, обычно, грузится быстрее и делает это за сравнительно меньший использованный трафик при вторичных и последующих загрузках.

PWA приложения прекрасно подходят для кейсов, когда важна работа офлайн. Более того, PWA приложения, при должном качестве разработки, могут заменить обычные десктопные приложениями и быть мультиплатформенными. То есть, приложение можно будет скачать и установить через браузер на любом плюс минус современном гаджете под управлением любой не совсем допотопной операционной системы. Это может быть полезно, когда, например, ограничен бюджет на разработку и хочется получить максимально широкое решение.

#web #theory

Что такое SPA?

SPA — Single Page Application — это такое приложение, весь контент которого может быть доступен с единственной его страницы. В рамках одной страницы пользователь взаимодействует с динамически обновляемым контентом без перезагрузки страницы. JavaScript просто меняет вёрстку, из-за чего создаётся ощущение переходов.

В основном, SPA популярны из-за возможности создавать по настоящему интерактивные интерфейсы. Почти любое действие на странице сразу же позволит пользователю увидеть его результат, будь то появившийся текст, окно, изменившаяся страница или лоадер.

Такой подход позволяет реализовать более плавную, в некоторых случаях, почти бесшовную навигацию. Связано это с тем, что зачастую достаточно перерисовать лишь небольшую часть приложения, оставив всё остальное как есть. Например, можно перерисовать лишь контент одной из вкладок, а навигацию, футер и другие элементы страницы не трогать.

Также в рамках SPA можно создавать более сложные и многоуровневые интерфейсы, что в современных реалиях применяется очень активно. Почти все современные web-приложения так или иначе являются SPA приложениями. Как пример, Figma, GitHub, Spotify, Slack, Trello, VK, YouTube и другие.

Основным же минусом SPA является то, что пользователь, зачастую, загружает разметку с сервера лишь единожды, и эта разметка максимально базовая. Всё остальное приложение строится на клиенте посредством возможностей JavaScript, а это медленнее.

Правило простое: для отображения статического контента лучше использовать, например, статическую генерацию, и рендерить всю вёрстку при билде приложения. Для интерактивных приложений лучше использовать SPA или его производные.

#web #theory

HTTP и HTTPS​

HTTP и HTTPS — это протоколы передачи данных в сети. Основная разница между ними заключается в безопасности.

HTTP передает данные в открытом виде. Это означает, что любой может перехватить и прочитать передаваемую информацию. Это делает HTTP небезопасным для передачи конфиденциальных данных, таких как логин и пароль, данные кредитных карт и т. д.

HTTPS же обеспечивает шифрование данных, используя протоколы безопасности, такие как SSL и TLS.

По сути, HTTPS — это ровно тот же HTTP, который поверх ещё и зашифрован при использовании дополнительных протоколов шифрования. В HTTPS все данные шифруются перед отправкой и расшифровываются только на стороне получателя.

При этом, HTTPS обеспечивает аутентификацию не только клиента, но и сервера, что позволяет пользователю убедиться в том, что он общается именно с тем сервером, который он ожидает.

Таким образом достигается достаточный уровень безопасности для передачи чувствительных данных, например, данных о банковской карте для очередной покупки в сети.

#web #theory