App Router и Pages Router: что изменилось в Next.js
Как могут заметить разработчики, фреймворк Next очень активно развивается. Так, некоторое время назад в 13 версии появилась новая парадигма (модель) для создания приложений — app router, которая должна прийти на смену старой pages router.
В этой статье мы постараемся наглядно продемонстрировать и рассказать, что же поменялось в работе приложения с появлением app router, какие изменения произошли в сравнении с pages router, что нового успели добавить разработчики, а от чего они отказались.
Ссылка
#статьи
Как могут заметить разработчики, фреймворк Next очень активно развивается. Так, некоторое время назад в 13 версии появилась новая парадигма (модель) для создания приложений — app router, которая должна прийти на смену старой pages router.
В этой статье мы постараемся наглядно продемонстрировать и рассказать, что же поменялось в работе приложения с появлением app router, какие изменения произошли в сравнении с pages router, что нового успели добавить разработчики, а от чего они отказались.
Ссылка
#статьи
// module.js
export default () => 'Hello world'
export const name = 'Lydia'
// index.js
import * as data from './module'
console.log(data)
Пояснение к предыдущему посту
С синтаксисом import * as name мы импортируем все exports из файла module.js в файл index.js, тогда и создается новый объект с именем data. В файле module.js есть два экспорта: экспорт по умолчанию и именованный экспорт. Экспорт по умолчанию - это функция, которая возвращает строку "Hello World", а именованный экспорт - это переменная с именем name, которая имеет значение строки "Lydia".
Объект data имеет свойство default для экспорта по умолчанию, другие свойства имеют имена именованных экспортов и их соответствующие значения.
Объект data имеет свойство default для экспорта по умолчанию, другие свойства имеют имена именованных экспортов и их соответствующие значения.
React + TypeScript: необходимый минимум
Преимущества изучения TS могут быть сведены к следующему:
- ваши шансы получить более высокооплачиваемую работу сильно увеличатся;
- в вашем коде будет намного меньше багов, его будет легче читать и поддерживать;
- рефакторить код и обновлять зависимости станет гораздо проще.
Эта статья представляет собой минимальное введение по использованию TS в React.
Ссылка
#react
Преимущества изучения TS могут быть сведены к следующему:
- ваши шансы получить более высокооплачиваемую работу сильно увеличатся;
- в вашем коде будет намного меньше багов, его будет легче читать и поддерживать;
- рефакторить код и обновлять зависимости станет гораздо проще.
Эта статья представляет собой минимальное введение по использованию TS в React.
Ссылка
#react
class Person {
constructor(name) {
this.name = name
}
}
const member = new Person('John')
console.log(typeof member)React: полное руководство по повторному рендерингу
Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React:
- первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
- ререндеринг — второй и последующие рендеринги компонента.
Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.
Ссылка
#react
Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React:
- первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
- ререндеринг — второй и последующие рендеринги компонента.
Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.
Ссылка
#react
function giveLydiaPizza() {
return 'Here is pizza!'
}
const giveLydiaChocolate = () =>
"Here's chocolate... now go hit the gym already."
console.log(giveLydiaPizza.prototype)
console.log(giveLydiaChocolate.prototype)Какой будет вывод?
Anonymous Quiz
35%
{ constructor: ...} { constructor: ...}
10%
{} { constructor: ...}
26%
{ constructor: ...} {}
29%
{ constructor: ...} undefined
Пояснение к предыдущему посту
Обычные функции, такие как функция giveLydiaPizza, имеют свойство prototype, которое является объектом (прототипом объекта) со свойством constructor. Однако функции со стрелками, такие как функция giveLydiaChocolate, не имеют этого свойства prototype. undefined возвращается при попытке доступа к свойству prototype с использованием giveLydiaChocolate.prototype.
Анализируем виды тестов для Frontend
С развитием веба сайты превратились в сложные приложения, которыми ежедневно пользуются десятки и сотни миллионов людей: почта, облачные хранилища, соцсети, маркетплейсы, стриминговые платформы и т. д. И каждое из них должно работать корректно. Как это сделать? Конечно писать хороший код, а потом и тестировать его. Хотя кто‑то обходится без тестов, тем не менее тестирование — важная часть инженерных практик наравне с мониторингом. Оно помогает нам заблаговременно находить и исправлять баги (или незапланированные фичи) в приложениях. Основная цель тестирования — получить гарантию корректной работы любого ПО .
Ссылка
#статьи
С развитием веба сайты превратились в сложные приложения, которыми ежедневно пользуются десятки и сотни миллионов людей: почта, облачные хранилища, соцсети, маркетплейсы, стриминговые платформы и т. д. И каждое из них должно работать корректно. Как это сделать? Конечно писать хороший код, а потом и тестировать его. Хотя кто‑то обходится без тестов, тем не менее тестирование — важная часть инженерных практик наравне с мониторингом. Оно помогает нам заблаговременно находить и исправлять баги (или незапланированные фичи) в приложениях. Основная цель тестирования — получить гарантию корректной работы любого ПО .
Ссылка
#статьи
const person = {
name: 'Lydia',
age: 21
}
for (const [x, y] of Object.entries(person)) {
console.log(x, y)
}Какой будет вывод?
Anonymous Quiz
32%
name Lydia and age 21
47%
["name", "Lydia"] and ["age", 21]
9%
["name", "age"] and undefined
12%
Error
Пояснение к предыдущему посту
Object.entries (person) возвращает массив вложенных массивов, содержащий ключи и объекты:
[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]
Используя цикл for-of, мы можем перебирать каждый элемент массива, в данном случае подмассивы. Мы можем мгновенно деструктурировать подмассивы в цикле for, используя const [x, y]. x равен первому элементу в подмассиве, y равен второму элементу в подмассиве.
Первым подмассивом является [ "name", "Lydia" ], где x равно "name", и y равно "Lydia", которые выводятся в лог. Вторым подмассивом является [ "age", 21 ], где x равно "age", и y равно 21, которые выводятся в лог.
[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]
Используя цикл for-of, мы можем перебирать каждый элемент массива, в данном случае подмассивы. Мы можем мгновенно деструктурировать подмассивы в цикле for, используя const [x, y]. x равен первому элементу в подмассиве, y равен второму элементу в подмассиве.
Первым подмассивом является [ "name", "Lydia" ], где x равно "name", и y равно "Lydia", которые выводятся в лог. Вторым подмассивом является [ "age", 21 ], где x равно "age", и y равно 21, которые выводятся в лог.
Заметка о полезных возможностях современного CSS
В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года.
"Полезный" означает, что я либо часто использую фичу в своих проектах, либо с нетерпением жду такой возможности.
Ссылка
#css
В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года.
"Полезный" означает, что я либо часто использую фичу в своих проектах, либо с нетерпением жду такой возможности.
Ссылка
#css
function getItems(fruitList, ...args, favoriteFruit) {
return [...fruitList, ...args, favoriteFruit]
}
getItems(["banana", "apple"], "pear", "orange")Пояснение к предыдущему посту
... args - прочие параметры. Значение прочих параметров - это массив, содержащий все оставшиеся аргументы и может быть передан только последним! В этом примере прочие параметры были вторым аргументом. Это невозможно, и это приведет к синтаксической ошибке.
Приведенный выше пример работает. Это возвращает массив [ 'banana', 'apple', 'orange', 'pear' ]
function getItems(fruitList, favoriteFruit, ...args) {
return [...fruitList, ...args, favoriteFruit]
}
getItems(["banana", "apple"], "pear", "orange")
Работаем с HTTP API: разбор частых проблем и методы их решения
Время идёт, технологии развиваются, а проблемы, связанные с использованием API, вызывают у многих разработчиков всё те же сложности, что и десятки лет назад. Между тем, рост числа сервисов, которые взаимодействуют друг с другом с помощью данного способа, день ото дня только увеличивается, и неумение надёжно, качественно и безопасно работать с API может привести к опасным сбоям или поломке разрабатываемой вами системы.
Ссылка
#статьи
Время идёт, технологии развиваются, а проблемы, связанные с использованием API, вызывают у многих разработчиков всё те же сложности, что и десятки лет назад. Между тем, рост числа сервисов, которые взаимодействуют друг с другом с помощью данного способа, день ото дня только увеличивается, и неумение надёжно, качественно и безопасно работать с API может привести к опасным сбоям или поломке разрабатываемой вами системы.
Ссылка
#статьи
function nums(a, b) {
if (a > b) console.log('a is bigger')
else console.log('b is bigger')
return
a + b;
}
console.log(nums(4, 2))
console.log(nums(1, 2))