Pull to refresh
1
0

Vue Frontend

Send message

Процесс рендеринга Vue

Reading time10 min
Views7.6K

Добрый день! Меня зовут Александр, я работаю frontend-разработчиком в компании Nord Clan. В прошлой статье мы рассмотрели процесс компиляции Vue, а теперь надо как-то «пристроить» результат этой самой компиляции в процесс рендеринга.

Дизайн лого: Марина Четвертакова

Читать далее
Total votes 9: ↑9 and ↓0+9
Comments0

Сквозь тернии к core-у или процесс компиляции Vue

Reading time11 min
Views10K

Нео проснулся от бликов вспыхнувшего экрана компьютера. Экран заполняла зеленая полоска прогресса.

– Матрица – испуганно прошептал Нео.

– Александр, вы уснули на работе – прошептал тимлид.

Я взглянул на экран компьютера еще раз. Компиляция Vue была завершена. Я облегченно вздохнул.

Скомпилировать!
Total votes 14: ↑13 and ↓1+18
Comments2

7 продвинутых приёмов JavaScript, которые должен знать каждый разработчик

Level of difficultyEasy
Reading time4 min
Views19K

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

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

Давайте разберём 7 продвинутых техник в JavaScript, которые помогут вам вывести свои навыки на новый уровень.

Читать далее
Total votes 31: ↑23 and ↓8+21
Comments10

Подборка выдающихся статей по тестированию

Reading time8 min
Views7.4K

Будучи консультантом по тестированию, я за годы работы прочитал массу статей по QA. Большинство из них — это в какой-то степени полезные, но часто случайные материалы, которые не всегда стоят времени. Но иногда я натыкался на удивительно хорошие статьи, которые действительно могут помочь улучшить навыки написания тестов. Я отобрал эти статьи и написал к ним аннотации. Половина из них относится непосредственно к JavaScript / Node.js, вторая половина охватывает общие концепции тестирования, которые применимы в любом языке.

Читать далее
Total votes 13: ↑12 and ↓1+14
Comments2

Не JavaScript’ом единым: как фронтенд-разработчику затащить на собесе

Reading time16 min
Views19K

Привет! Меня зовут Виталий, я тимлид в KTS, и за годы работы я провел больше 100 собеседований.

Кто-то на собеседовании от вас может ожидать знание 50-го аргумента функции callKek(), но это не мой подход, потому что в реальной жизни глубокого знания JavaScript не всегда бывает достаточно, а отдельные его тонкости и вовсе пригождаются крайне редко.

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

Читать далее
Total votes 54: ↑54 and ↓0+56
Comments30

RStudio, R Markdown, Latex и отчеты в PDF формате. Мой опыт

Reading time8 min
Views4.1K

RStudio, R Markdown, Latex и отчеты в PDF формате. Мой опыт.

Сегодня я хочу рассказать о том, как я писал отчеты на R, с чем сталкивался и как решал проблемы, которые возникали по ходу разработки. Отчеты были в формате PDF и запускались из Python в Camunda.

Читать далее
Total votes 3: ↑3 and ↓0+3
Comments4

Как структурировать крупномасштабное приложение Vue.js

Reading time11 min
Views26K

Как лучше всего структурировать приложение Vue.js, чтобы оно масштабировалось и оставалось обслуживаемым и расширяемым по мере его роста? Этот вопрос я слышал неоднократно, и думаю, что один из ответов на него кроется в принципе предсказуемости. Когда речь идет о создании масштабируемого проекта, вы хотите, чтобы все в нем было максимально предсказуемо.

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

Почему это важно? Вы наверняка сталкивались с ситуацией, когда получали в наследство проект или были введены в него, а затем при выполнении первой задачи открывали кодовую базу и думали: "Я даже не знаю, с чего начать!".

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

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

Читать далее
Total votes 8: ↑6 and ↓2+5
Comments3

Возможности Vue, о которых не следует забывать

Reading time5 min
Views17K
Мы в команде Ptah решили пойти чуть дальше привычных SPA и попробовали использовать Vue для конструктора лендингов. И теперь хотим поделиться частью нашего опыта.

Эта статья, прежде всего, для тех, кто только начал работать с Vue и хочет узнать лучше его особенности и возможности. Здесь я хочу рассказать о некоторых возможностях фреймворка, которые часто остаются незаслуженно забытыми начинающими разработчиками.
Читать дальше →
Total votes 18: ↑18 and ↓0+18
Comments21

Material 2.0 для разработчиков. Краткий обзор новых компонентов

Reading time7 min
Views46K


В мае на Google I/O мы впервые увидели Material Design 2.0. Команда Google провела крупный рефакторинг и выпустила обновленную библиотеку дизайна. В ней появились новые компоненты и анимации. Мы следим за развитием Material Components с самого начала. Сейчас все находится на стадии RC1, и уже скоро выйдет в релиз. Под катом обзор новых и обновленных UI-компонентов для тех, кто еще не пробовал их в работе, но интересуется.

Читать дальше →
Total votes 28: ↑28 and ↓0+28
Comments13

12 принципов создания успешной иконки

Level of difficultyEasy
Reading time4 min
Views9.7K

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

Тут мы сосредоточимся на работе в Figma и приёмами, что позволяют сделать всё правильно.

Читать далее
Total votes 24: ↑24 and ↓0+24
Comments9

[SDK и UI-библиотеки] Декомпозиция UI-компонентов

Level of difficultyHard
Reading time12 min
Views1K

Это глава 44 раздела «SDK и UI-библиотеки» моей книги «API». Второе издание книги будет содержать три новых раздела: «Паттерны API», «HTTP API и REST», «SDK и UI‑библиотеки». Если эта работа была для вас полезна, пожалуйста, оцените книгу на GitHub, Amazon или GoodReads. English version on Substack.

Перейдём к более предметному разговору и попробуем объяснить, почему требование возможности замены одной из подсистем компонента приводит к кратному усложнению интерфейсов. Продолжим рассматривать пример компонента SearchBox из предыдущей главы. Напомним, что мы выделили следующие факторы, осложняющие проектирование API визуальных компонентов:

Читать далее
Total votes 10: ↑10 and ↓0+10
Comments0

[SDK и UI-библиотеки] Проблемы встраивания UI-компонентов

Level of difficultyHard
Reading time6 min
Views609

Введение в состав SDK UI-компонентов обогащает и так не самую простую конструкцию из клиент-серверного API и клиентской библиотеки дополнительным измерением: теперь с вашим API взаимодействуют одновременно и разработчики (которые написали код приложения), и пользователи (которые используют приложение). Хотя это изменение на первый взгляд может показаться не очень значительным, с точки зрения дизайна API добавление конечного пользователя — огромная проблема, которая требует на порядок более глубокой и качественной проработки дизайна программных интерфейсов по сравнению с «чистым» клиент-серверным API. Попробуем объяснить, почему так происходит, на конкретном примере.

Читать далее
Rating0
Comments0

Пишем переиспользуемые компоненты, соблюдая SOLID

Reading time21 min
Views26K
Всем привет! Меня зовут Рома, я — фронтендер в Я.Учебнике. Сегодня расскажу, как избежать дублирования кода и писать качественные переиспользуемые компоненты. Статья написана по мотивам (но только по мотивам!) доклада с Я.Субботника — видео есть в конце поста. Если вам интересно разобраться в этой теме, добро пожаловать под кат.

Статья содержит более детальный разбор принципов и подробные примеры из практики, которые не поместились в доклад. Рекомендую прочитать, если вы хотите глубоко погрузиться в тему и узнать, как мы пишем переиспользуемые компоненты. Если же вы хотите познакомиться с миром переиспользуемых компонентов в общих чертах, то, по моему мнению, вам больше подойдёт запись доклада.
Читать дальше →
Total votes 14: ↑13 and ↓1+15
Comments3

Веб-компоненты в реальном проекте

Reading time16 min
Views9.6K


Всем привет! Меня зовут Артур, я работаю frontend-разработчиком в Exness. Не так давно мы перевели один из наших проектов на веб-компоненты. Расскажу, с какими проблемами пришлось столкнуться, и о том, как многие концепции, к которым мы привыкли при работе с фреймворками, легко перекладываются на веб-компоненты.


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

Читать дальше →
Total votes 11: ↑11 and ↓0+11
Comments7

Заменяй и властвуй — подход SOLID для разработки повторно используемых компонентов в вебе

Reading time9 min
Views19K

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


Эта статья во многом вдохновлена докладом Павла Силина на РИТ 2017, однако здесь много моего собственного опыта и размышлений. Примеры будут на React + TypeScript, однако подход не привязан к какой-либо технологии.


Читать дальше →
Total votes 19: ↑13 and ↓6+7
Comments166

Компактные Vue компоненты из самописных SVG иконок

Reading time10 min
Views7.1K


История вопроса


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


Мне уже давно и прочно нравится мир Vue. Особенно завораживает скорость, с которой в нём рождаются новые возможности писать код более лёгким и понятным. Недавно появились Composition API, VueUse, Vite… По ходу освоения этих новых инструментов я нашёл шаблон Vitesse, буквально насыщенный удобными средствами — и для управления макетами (layout), и для маршрутизации, и для локализации и ещё для много чего… Возможно, есть смысл написать отдельный обзор этого арсенала по русски (чего в Интернете пока ещё нет). Но сейчас речь не об этом.

Читать дальше →
Total votes 4: ↑4 and ↓0+4
Comments11

Как мы строили Норильск «на ледяной планете»

Reading time13 min
Views56K


60–65% территории России занимает вечная мерзлота. Она бывает разная: где-то это много относительно сухой земли, а где-то прямо линза льда (до 95% воды), причём глубиной до нескольких километров. В районе Норильска можно грубо сравнить её с замёрзшим океаном.

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

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

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

Современный город стоит на скальных выходах как на островах: есть центральный жилой остров, есть Оганер — остров с больницей, есть Талнах — добывающий район, отдельно есть аэропорт, есть Надежда — ещё один комбинат, есть остров Дудинка — порт в 90 километрах от центра. Есть кусок скалы — можно строить. Нет скалы — нельзя строить.

В общем, я хочу рассказать вам про удивительно прекрасный и, как это ни странно, уютный Норильск.
Читать дальше →
Total votes 289: ↑284 and ↓5+332
Comments614

Есть много способов сделать это: Vue 3 и взаимодействие компонентов

Reading time18 min
Views60K

Vue 3 принёс в жизнь разработчиков возможность организации более гибкой структуры приложений. Всё чаще я стал замечать, что разные команды, а порой и разработчики внутри одной, используют целый зоопарк сомнительных подходов для организации взаимодействия между компонентами. Применяются какие-то крайности, либо всё в state manager, либо в composable (composition API), либо мутация props внутри дочерних компонентов!

Хотелось бы поднять эту тему и рассмотреть варианты взаимодействия компонентов доступные нам во Vue 3.

Давай посмотрим...
Total votes 13: ↑13 and ↓0+13
Comments20

Давид Хейнемейер Ханссон: День, когда я стал миллионером

Reading time5 min
Views22K
Я в центре, в самодельной одежде и с ниндзевским оружием.

Я вырос в семье среднего класса на окраине Копенгагена. Если бы мы жили где-нибудь вне Скандинавии, то, очевидно, принадлежали бы к низшему классу, но системы социальной защиты и оказания помощи Дании действительно стараются помочь.

Автор: Давид Хейнемейер Ханссон (DHH) — создатель Ruby on Rails основатель и техдиректор Basecamp, автор бестселлеров REWORK и REMOTE, автогонщик 24 Hours of Le Mans.

Перевод: Юлия Хаитова

Но не стоит переживать: эта не история из серии «из грязи в князи». Я не выношу все эти истории «я всего добился сам». Положения, которое я занимаю сейчас, я достиг благодаря государственной поддержки матерей-одиночек, социальной помощи детям, образованию и даже денежной помощи. Я вырос в доме, построенном по социальной программе улучшения жилья от ААВ, фонда жилищного и социального строительства. И моя мама была настоящим волшебницей, когда мы едва сводили концы с концами (она могла проехать на велосипеде лишние 15 минут, чтобы найти молоко по самой низкой цене).

Я выучил два урока. Первый, пока вы заняты удовлетворением базовых потребностей, ваш жизненный опыт едва ли связан с атрибутами успеха. Не все было в розах и печеньках, но у меня было чудесное детство. Второй, я не научился ценить первый урок, пока не увидел другую сторону монеты. И немного об этом.
Читать дальше →
Total votes 46: ↑43 and ↓3+40
Comments70

Как избежать излишней сложности состояния приложения [перевод]

Reading time9 min
Views18K


Реализации Flux, такие как Redux, мотивируют нас уделять больше внимания проектированию состояния приложения. Оказывается, это нетривиальная задача. Это похоже на классический пример из теории хаоса, когда, казалось бы, безобидный взмах крыльев бабочки ведёт к далеко идущим последствиям. Ниже приведены советы, которые помогут вам лучше организовать состояние приложения.
Читать дальше →
Total votes 19: ↑19 and ↓0+19
Comments7

Information

Rating
Does not participate
Location
Алматы (Алма-Ата), Алма-Атинская обл., Казахстан
Registered
Activity

Specialization

Frontend Developer
Junior
From 500,000 ₸
Vue.js
TypeScript
Nuxt.js
SCSS