На чем делают сайты в 2021

Поиск лучшего фронтенд-инструмента 2021 года

Любой, кто начинает карьеру в сфере разработки программного обеспечения, скорее всего столкнётся с задачей выбора первого языка, фреймворка или набора инструментов. Уверен, каждому из вас это знакомо. Ответ на вопрос о том, что нужно изучать самым первым, найти не так уж и просто. Всё дело в том, что в индустрии программирования существует очень много языков и вспомогательных инструментов. Для того чтобы облегчить выбор инструментов тем программистам, которые нацелены на фронтенд-разработку с использованием JavaScript, я решил рассказать о трёх популярных JS-инструментах.

Речь пойдёт об Angular, React и Vue. Сначала я приведу материалы некоторых исследований, что поможет нам понять «расстановку сил» на арене современной веб-разработки. А потом расскажу о преимуществах и недостатках этих инструментов.

Исследование Stack Overflow

Сведения о веб-фреймворках и библиотеках из исследования Stack Overflow 2019 года

В исследовании Stack Overflow 2019 года можно найти сведения о популярности фреймворков и библиотек. Здесь библиотека React и фреймворк Angular занимают, соответственно, вторую и третью строчки рейтинга. В похожем исследовании 2018 года Angular был выше React. Но если рассмотреть результаты опроса профессиональных разработчиков, то и в 2019 году Angular тоже окажется выше React. А вот Vue, несмотря на то, что этот фреймворк активно развивается, находится в рейтинге лишь на седьмой позиции.

Данные проекта NPM Trends

Сравнение React, Vue и Angular с использованием проекта NPM Trends

Вышеприведённый график построен с использованием возможностей проекта NPM Trends. Здесь показано изменение количества загрузок соответствующих пакетов с течением времени. В частности, на нашем графике представлены данные за 6 месяцев 2020 года. Тут хорошо видно то, что React, по исследуемому показателю, значительно обходит конкурентов. А количество загрузок Vue, с другой стороны, постепенно растёт и сейчас находится в районе полутора миллионов.

NPM Trends позволяет анализировать не только количество загрузок пакетов из NPM, но и данные соответствующих проектов, взятые с GitHub. На следующем рисунке показаны сведения о репозиториях интересующих нас фронтенд-инструментов.

Сведения о репозиториях React, Vue и Angular

Исследование State of JavaScript

Воспользовавшись результатами исследования State of JavaScript 2019 года, можно продолжить сравнение интересующих нас инструментов. На следующем рисунке показан отчёт, содержащий сведения об отношении респондентов к React, Vue и Angular. Они, оценивая фреймворк или библиотеку, могли выбирать разные варианты ответов. Например, среди них есть такие: «Использовал и буду использовать», «Слышал и хотел бы изучить», «Никогда не слышал».

Отношение респондентов исследования State of JavaScript к фреймворкам и библиотекам

Как видно React и Vue обходят Angular по показателю, характеризующему вариант ответа «Использовал и буду использовать».

Angular

Angular (по данным State of JavaScript 2019)

Для меня Angular — это фреймворк, с которого я начинал моё путешествие в мир разработки ПО. И я не жалею о том, что выбрал именно этот фреймворк. Angular, в сравнении с другими рассматриваемыми здесь инструментами, можно счесть немного более зрелым, чем они. Вокруг него сформировалось более крупное сообщество. Помимо того, что этот фреймворк является частью знаменитого стека MEAN, он ещё и даёт разработчику немало замечательных возможностей. Это, например, двусторонняя привязка данных, внедрение зависимостей, архитектура MVC, Angular CLI, поддержка TypeScript, поддержка директив и так далее.

Но в последние несколько лет, по мере роста популярности конкурентов, вроде React и Vue, Angular потерял часть былой популярности. Причиной этого стало то, что Angular — достаточно «тяжёлый» фреймворк. Он не соответствует ожиданиям программистов по многим показателям. Это и особенности выхода его новых версий, и ограниченная поддержка SEO, и сложности в его изучении. Именно поэтому в наши дни фронтенд-разработчики всё чаще выбирают Vue или React. Но Angular всё ещё используется во многих популярных веб-проектах. Это, например, проекты Guardian, Upwork, PayPal, Sony. Речь идёт о больших серьёзных сайтах, на которых Angular хорошо себя показал.

К Angular стоит присмотреться в следующих ситуациях:

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

React

React (по данным State of JavaScript 2019)

React, по данным исследования State of JavaScript, три года подряд занимает первые места во всех рейтингах. Библиотека React была выпущена Facebook в 2013 году. Цель создания React заключалась в разделении пользовательского интерфейса на набор компонентов, что должно было упростить процесс разработки. Одним из преимуществ React является возможность использования этой библиотеки для разработки нативных приложений. Среди других сильных сторон этой библиотеки можно отметить большое сообщество, поддержку со стороны Facebook, обширную экосистему, высокую производительность, механизмы многократного использования компонентов, поддержку SEO-механизмов.

Правда, иногда обновления React могут вызывать некоторые разногласия и споры в среде разработчиков, так как им приходится что-то менять в своей работе для того чтобы избежать проблем с совместимостью. Среди других минусов React отмечают применение JSX и недостаточно подробную документацию.

Вот ситуации, в которых можно прибегнуть к React:

• Создание одностраничных или кросс-платформенных приложений.
• Разработка небольших приложений корпоративного класса.

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

Vue (по данным State of JavaScript 2019)

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

Специалисты по этому фреймворку сейчас чрезвычайно востребованы на рынках Азии. Но у Vue есть и недостатки. Например — не очень хорошая приспособленность к поддержке крупномасштабных проектов и небольшое сообщество. Правда, существуют ситуации, в которых Vue вполне может стать идеальным выбором:

• Разработка маленьких и нетребовательных к ресурсам приложений (вроде Grammarly).
• Создание интеллектуальных и высокопроизводительных проектов.
• Разработка веб-приложений на ранних стадиях их выхода на рынок.

Итоги

Если сделать выводы из вышесказанного, то получится, что лучшим фронтенд-инструментом, тем самым, который стоит изучить в 2021 году, является React. За ним следует Vue. Но высоки шансы того, что вместо Vue следом за React можно будет поставить Angular. Этот фреймворк существует дольше Vue. Непохоже, что в 2021 году Angular исчезнет. Поэтому, если вы являетесь Angular-разработчиком, то я советую вам, готовясь к 2021 году, приступить к изучению React.

Как вы думаете, какие веб-инструменты будут особенно востребованными в 2021 году?

Как бы я делал себе сайт в 2021 году

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

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

По доброте душевной, я сначала соглашался. А потом просили обновлять картинки, придумывать текст, вставлять дополнительные страницы. Работа скучная, рутинная. Хотелось бы, чтобы ее можно было сделать, не дергая меня. И я погрузился в дивный новый мир CMS и конструкторов интернет магазинов. В итоге закончил тем, что на досуге веду курсы по WordPress.

Сравнивать буду три основных подхода:

1) чистая разработка, программирование, JavaScript, HTML, верстка CSS, фреймворк не важен. Грубо говоря, это когда мы идем и нанимаем программиста, который нам напишет сайт не на конструкторе.

2) WordPress, но так, чтобы не писать код, потому что, если писать код, то чем это отличается от пункта номер один? Тут мы сами, разработчик или студия, делаем себе сайт на WordPress.

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

Разработка выигрывает с большим отрывом. Какими бы профессиональными не были шаблоны, но реализовать все замыслы не получается. Даже платные темы не дают такой кастомизации.Если дизайн не важен, то на второе месте я субъективно ставлю платные WordPress темы и элементы оттуда. Все базовые блоки есть, а изменить можно почти до неузнаваемости.

Разработка выйдет самой дорогой. Если проект большой, то идеально иметь программиста на зарплате. Зарплата программиста в 100 тысяч для Москвы это не серьезно, но для регионов самое то. Это просто как ориентир. Можно заказать разовую работу в студии.WordPress или конструктор выйдут гораздо дешевле.Тут можно конечно посчитать, что именно выйдет дешевле: подписка или платные темы и дополнительные плагины, разница будет в тысячи рублей. Если они принципиальны, то скажу, что WordPress выйдет самым дешевым.

Легкость в изучении

Разработка — это сложно, если не планируете этим зарабатывать и интереса тоже нет, то не рекомендовал бы туда залезать. В WordPress при наличии минимальных знаний, можно подкрутить все самому. Не помешает пройти какой-либо курс. Конструкторы по сложности такие-же как WordPress, облегчают только деплой сайта. Грубо говоря, вам не надо будет заливать сайт на ваш домен. Что в принципе не сложная процедура, если делаете сайт самостоятельно. Ключевые слова — «Total Commander, залить сайт на домен через FTP». И еще момент, в WordPress или на конструкторе, главное — чувство вкуса и умение писать текст.

Производительность

Тут все не однозначно. Разработка по идее обеспечит лучшую производительность, но не факт, что ваш разработчик в нее умеет. Если надо, чтобы было быстро — ключевые слова для гугла WebPageTest. Запустите тесты на медленном соединении и наблюдайте за результатами.Будет идеально, если вам все сделают на nextjs.WordPress если его не обременять тяжелыми темами или плагинами даст неплохую производительность из коробки. Что касается конструкторов — то результаты обычно такие же, как у нагруженного WordPress сайта.

Гибкость. Подключения сторонних сервисов. Биллинги, метрики итд

Тут все просто. Разработка самая гибкая, были бы деньги на оплату программиста. WordPress очень гибок. Миллионы плагинов. Конструкторы, увы, предоставляют, только то, что есть.

Привязка к площадке или технологии

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

Субъективный пункт, который актуален, если планируете сайт на лет так десять-пятнадцать. Условно, можно ли будет вносить правки в сайт через лет 10-15 или придется все переделывать с нуля. Технологии разработки устареют, конструктор не факт, что еще будет работать. WordPress эволюционирует, но не думаю, что куда-то денется.

Если коротко, то WordPress тут лидирует. Бесплатные плагины дают весь необходимый функционал из коробки, который настраивается за 15 минут.При желании можно докупить продвинутых фич за 10-20 долларов. Конструкторы дают разные результаты. Разработка хороша, но WordPress тут просто быстрее.

Платёжные системы

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

Для условных сложных сервисов, типа «доставка еды, где можно видеть курьера онлайн на карте» или «онлайн-бухгалтерия» выбор, увы — только разработка.

Если нужен простой лендинг пейдж, то WordPress или конструктор.

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

WordPress меня удивил. За годы его существования, там появилось все что нужно для типичного сайта в интернете. Нужен интернет магазин — установил WooCommerce и готово. Нужен экспорт данных с форм в PDF файл — установил плагин Ninja Forms и готово. Хотите брать и перетягивать элементы на страницу, как в песочнице — ставите Elementor и даже ваша бабушка сделает вам красивый сайт. Я в целом понимаю, почему примерно каждый третий сайт на WordPress.

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

Создание сайта в 2023 году: полный гайд с примерами

Запуск сайта – один из самых важных шагов для компании. Создать сайт один раз и навсегда нельзя: нужно каждый день подстраиваться под тренды и изменения. Разберем, что нужно любому сайту для успеха сейчас, и поделимся примерами из практики TexTerra.

0. Постановка задачи

Сначала нужно разобраться, зачем нужен сайт. От этого будет зависеть его тип: если вы планируете, что сайт будет посвящен одной услуге/продукту, то стоит выбрать формат лендинга, если планируете рассказывать о разных продуктах и услугах, то нужен многостраничный сайт (кстати, у нас вы можете заказать разработку сайта — прим. отдела продаж TexTerra).

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

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

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

1. Формирование УТП

Неважно, какой сайт вы делаете, первое, что нужно при подготовке, – найти свою особенность. Это не значит, что у вас должны быть уникальные картинки и 80 % + по «Адвего» (сервис проверки уникальности текста).

Уникальность в 2023 году – это необычная черта бизнеса, которая отличает его от остальных. Акцентируйте на этом внимание, иначе рискуете затеряться в информационном шуме.

К примеру, коммерческое предложение СОИК – производство полезной профилактической продукции из фитосырья (здесь и далее ссылки ведут на кейсы TexTerra – прим. ред.). Их уникальность состоит в том, что они не просто продают травяные и фиточаи, но и подсказывают клиентам, для чего нужен каждый ингредиент в сборнике.

Из УТП понятно, что уникального в бизнесе и чем он будет полезен клиенту

Еще один пример того, как уникальность помогает в продажах – SMM-продвижение тренажеров для реабилитации. Из-за специфики этой тематики конкуренты просто боятся заходить в соцсети, так как считают: «Раз здесь сложно достучаться до тех, кто принимает решение о покупке, зачем тратить время и нервы?» И это большая ошибка!

Сайт для реабилитационных тренажеров

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

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

Переписка с пользователем о реабилитационных тренажерах

Материалы, которые помогут найти и сформулировать особенность бизнеса:

2. Подготовительные работы

Подготовка – самая важная часть разработки сайта. Даже опытные специалисты не сделают «Сайт Мечты», пока не составят четкое ТЗ, что возможно только после проведения всех подготовительных работ в полном объеме.

Анализ ниши и конкурентов

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

Вот на что нужно обратить внимание при конкурентном анализе:

• Как устроены сайты конкурентов – какая у них структура, дизайн, какие детали;
• Насколько качественен сайт с точки зрения пользователя, удобно ли ему на нем;
• Какое у сайта УТП.

Также стоит обратить внимание на то, как клиенты ведут соцсети, а если есть рассылка, то и на нее.

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

SWOT-анализ бизнеса

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

Если по-русски, то это ССВУ-анализ: анализ Сильных сторон, Слабых сторон, Возможностей и Угроз продукта

К примеру, дружественные консультанты в магазине – это офлайн-УТП, которое будет побуждать клиентов пользоваться вашими услугами вне интернета. Каким будет УТП для тех, кто пользуется вашими услугами в интернете? Решайте сами, анализируя конкурентов. Это может быть мгновенная доставка «до двери», предоставление десятков тестеров / семплов по первому щелчку и т. д.

Как я изучала рынок, чтобы открыть парикмахерскую – универсальные шаги

Продумывание посыла, ядра и приблизительного «скелета» сайта

Вы проанализировали конкурентов и нашли веб-УТП? Поздравляем, теперь это нужно красиво оформить. Продумайте посыл и миссию сайта.

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

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

Структура лендинга продумана, все разделы отражены на самом верху сайта. На главной – четко сформулированная миссия

Структура сайта может быть разной:

• линейной – подразумевает цепочкообразный порядок и равнозначность страниц;
• линейной с разветвлением – построена аналогичным предыдущей структуре образом, но здесь в каждом звене есть дополнительные подразделы;
• блочной – в ней все страницы являются равнозначными;
• иерархической – в ней каждая последующая веб-страница – это «родственник» предыдущей (поэтому иногда ее называют древовидной).

Где логика: разбираем самые популярные виды структур сайтов

Покупка хостинга и домена

Хостинг – услуга размещения информации на сервере, «домик» сайта. Домен – имя сайта, которое отображается в адресной строке.

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

Разобраться, что выбрать, помогут наши материалы:

3. Выбор стратегии продвижения + ключевые слова

Сформировали стратегию сайта и его карту? Можно собирать ключевые слова из сервисов WordStat и KeySo для дерева запросов. Необязательно сразу делать «большое дерево». Иногда, при работе с ключами вы будете замечать, что какие-то запросы неинтересны ЦА. При этом «деревянная» структура обязательна: не нужно продвигать на одной странице доставку суши в Москве и в Новосибирске.

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

Такие схемы удобно делать в виде интеллект-карт (mind maps)

Если что-то «не зайдет», будет легко это удалить, не зацепив при этом остальные страницы сайта. Лучше инвестировать время и внимание в те части проекта, которые точно дадут отдачу. Или где хотя бы чувствуется перспектива.

Практическое руководство по подбору поисковых фраз

4. Выбор CMS

CMS (система управления контентом) – одна из важнейших вещей в сайтостроении. Верно подобранная «админка» поможет реализовать все задумки, быстро масштабироваться и работать без критических багов. Для текста идеально подойдет WordPress, хорошо будет работать Tilda. Магазинам лучше присматриваться к «Битриксу» и Shoptet.

Изучайте, какие админки больше всего подойдут под вашу специализацию и выбирайте ту, которая подойдет вам как по скорости, так и по удобству работы:

5. Подготовительная работа с Google и «Яндексом»

После того, как вы приобрели веб-адрес, нашли хостинг, продумали УТП и структуру сайта, можно переходить к подготовительной работе в поисковиках.

Создайте профили в «Google Бизнес» и «Яндекс.Бизнес». Это поможет клиентам находить вас, задавать вам вопросы, а вам – отвечать на них, видеть статистику и привлекать покупателей.

Добавьте предприятие на Google Maps и «Яндекс.Карты» (также не помешает Bing). Чем больше сервисов уже индексирует вас, тем лучше. У вас может еще не быть сайта, но страничка на карте обязательна! Иначе как люди узнают, что вы работаете рядом с ними?

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

Если у вас интернет-магазин, можете добавить товары на Яндекс.Маркет. Платить придется, но только за покупки – просмотры карточек бесплатны.

Товары в Яндекс.Маркет добавляются с помощью YML-файла – об этом мы писали в статье «YML-файл для Яндекс.Маркета: что это, зачем и как его сделать».

6. Работа с ядром и структурой сайта

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

Создание семантического ядра

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

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

В высокочастотных запросах нереальная конкуренция, и, если сфера уже сформирована, там точно есть «мастодонты», до которых еще нужно расти / вливать огромные средства в рекламу.

Запросы «средней частоты» универсальны – по ним довольно часто переходят, хотя конкуренция еще не такая большая.

Для нишевых сайтов подойдут низкочастотные запросы.

Если видите, что семантическое ядро и «эскизная» структура сайта (о которой мы писали в разделе про посыл, ядро и «скелет» сайта) отличаются, не бойтесь менять структуру. В будущем ее всегда можно расширить / уменьшить, а сейчас вам нужно откликаться на как можно большее количество релевантных запросов.

Удаление «мусорных» запросов

Мусорные запросы – те, которые идут по вашей теме, но при этом не соответствуют тематике сайта. Используйте отсев по стоп-словам, специфической лексике, географии и путем проверки орфографии.

Такие запросы можно удалять без сожалений

К примеру, у вас есть два запроса: «купить молотый кофе в москве» и «купить молатый кохфа в маскве». Удаляйте второй с чистым сердцем: поисковик все равно исправит на первый и покажет в выдаче именно его.

Минимизация слов с высокими Keyword Difficulties

Keyword Difficulty – индекс, который показывает, насколько сложно будет обогнать конкурентов в поисковике Google. Всего оценки группируются по 3 большим блокам:

• 80 % – уровень джедая. Если возьмете поисковые слова с такой сложностью, готовьтесь к вливанию огромных сумм (зависящих от сферы деятельности). Новичкам без чемоданов денег лучше сюда и не заходить.
• 60–80 % – Квентин Тарантино в мире ключевиков. Да, вам не придется применять суперсилы, чтобы оказаться здесь в первых строках выдачи, но посоревноваться придется знатно.
• 60 % – на изи. Такие ключи имеют регулярный трафик, хорошо ранжируются, но здесь нет бешеной конкуренции. Идеальный выбор для новеньких.

7. Линкбилдинг-стратегия

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

Вам нужно как самим ссылаться на сторонние сайты (с хорошим рейтингом и ИКС (индекс качества сайта)), так и получать цитирование от таких порталов.

Краткое руководство по линкбилдингу:

1. Создайте контент, достойный ссылок на него и цитирования.
2. Покажите его веб-сайтам, которым он мог бы быть интересен, чтобы они его процитировали или сослались на этот контент.
3. Добавляйтесь на сайты, где вы сами можете опубликовать ссылку: бизнес-каталоги, блоги (раздел «Комментарии»), форумы, соцсети.
4. Обменивайтесь ссылками с ресурсами, которые подходят вам по тематике.

Еще о грамотном продвижении ссылками:

8. Дизайн сайта

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

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

Трехмерность

Кажется, этот тренд выработал стабильные «качели»: объемность возвращается раз в 2-3 года, после чего исчезает в угоду 2D и снова возвращается. В 2023 году в тренде реалистичные 3D-элементы (главное, чтобы они были без эффекта «зловещей долины» (когда из-за мелких несоответствий реальности, но общего пугающего сходства с нею у человека возникает чувство неприязни и страха от изображения).

Сейчас 3D-иллюстрации разрабатываются в различных стилях (абстрактный, мультипликации, чертежи). Такие иллюстрации придают индивидуальный стиль продукту или услуге.

Святослав Грошев

Арт-директор TexTerra

Объемность

Пользователи MacOS Big Sur уже успели заценить «объемные иконки». Этот тренд постепенно заходит и в веб-дизайн, так что следует ожидать объемности и подумать, не внедрить ли ее у себя.

Слои, плавающие элементы

За несколько лет скролл-эффекты пользователям поднадоели. Современный юзер хочет видеть максимальную легкость.

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

Отличный пример такой «легкости» – сайт дизайн-студии LEVELLEN. Работа с пустым пространством дала ему нужную воздушность.

Студия делает стильные дизайны, поэтому и сайт у нее стильный и «легкий»

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

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

Хороший дизайн – как картина или тот снимок из рекламы автомобиля – несет в себе задачу сконцентрировать внимание на основном, на продукте. Если в дизайне появляются дополнительные элементы, которые не несут информации, они только помешают.

Так какие детали использовать можно?

Действительно важную (!) информацию: характеристики продукта, условия его приобретения. Текст должен быть четко структурирован – тут требуется работа со стилями текста, акцентными шрифтами, размерами. Графические элементы должны делать акцент на свойствах продукта или дополнять текстовую информацию.

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

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

Святослав Грошев

Арт-директор TexTerra

Микс графики и фото

Тренд на сочетание графических элементов с фотографиями до сих пор остается востребованным. Возьмите его на вооружение: это простой и быстрый способ вдохнуть «жизнь» в графическую составляющую сайта и связать фото в одну композицию.

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

Микс графики и фото выглядит свежо

Этот прием также использует языковая школа LEXXIS. Благодаря этому сайт смотрится более «живым» и современным.

А здесь такой микс выглядит ярко и смело

Мы в работе часто миксуем фото и графику, чтобы разнообразить визуал.

Можно просто поставить квадратное фото, и получится скучная статичная композиция. А можно это фото закруглить, добавить тень, создав эффект полета, геометрические формы – это добавит динамики. И вот уже из скучного шаблонного решения мы получаем уникальную работу.

Так было и в проекте lexxis. Мы столкнулись с тем, что тематика весьма объемная по количеству контента. Убрать или сократить его нельзя. Остается разнообразить и добавить воздуха, для чего мы взяли фирменный красно-бордовый цвет, который бы частично разгружал страницу, немного перетягивая внимание на себя. Заключили его в форму круга с обводкой и различными способами обыграли в дизайне.

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

Александра Паршина

ex-заместитель руководителя отдела дизайна TexTerra

Векторная графика

Нужно подстраиваться под поведение аудитории, а она сегодня заходит на сайты со смартфонов. Но как это сделать, если один сидит с «тапка» с диагональю 3,5 дюйма, у второго – iPhone 13 Pro Max, а третий меняет телефоны на Android, как перчатки? Только через векторную графику! У нее нет привязки к пикселям, она легко масштабируется и адаптируется к любой диагонали, от умных часов до 4К-телевизора.

Именно так мы и сделали при создании сайта доставки «Имеретинская лавка». Основные элементы выполнены в КИвекторе, поэтому легко масштабируются для просмотра с любого девайса.

Сайт можно просматривать с любого устройства, что особенно актуально сейчас, учитывая рост мобильного поиска

Цифры, данные и исследования

Если хотите взрастить любовь к своему бизнесу у пользователей, делитесь с ними цифрами, учите интересному. Продумайте, как правильно подать всю эту информацию.

Например, общероссийский таможенный представитель TAISU-ТБ прямо на титульной странице сайта предоставил сертификаты качества и список довольных клиентов.

Цифры, статистика, исследования, инфографика и сертификаты вызывают доверие

Еще один пример – сайт для производителя напольных покрытий «КоронаПласт». В центре внимания – полезные факты о компании, сертификаты, именитые партнеры и подтверждения надежности.

Посетители сайта могут скачать pdf-файлы с каталогом и инструкциями по монтажу – это тоже про полезность

Темные цвета

Темный фон смотрится элегантно и не «выжигает глаз», как темный текст на белоснежном фоне. Более того, такие темы способствуют экономии энергии и увеличивают срок службы OLED-экранов.

Именно таким мы сделали сайт для видеостудии «Видеозаяц.РФ». Он умело сочетает темную тему, векторную графику и работу со слоями.

Темные цвета особенно хорошо выглядят в премиум-сегменте, в digital- и игровой сферах

При выборе цветов для интерфейса отталкивайтесь не только от трендов, но и от самого бренда, сервиса и продукта. Темная «тема» хороша далеко не для всех, но никто не запрещает «играться» с оттенками серого 😉

Уже почти год дизайнеры активно используют в работе темные темы. Увы, масштабировать их опыт на всех не удастся: есть тематики, которые этого не предусматривают. В Рунете темные цвета обычно ассоциируются с люксовым сегментом или геймингом ­– здесь это будет максимально органично и гармонично.

В рамках проекта «ВидеоЗаяц» мы решили немного отклониться от негласных правил и разработать дизайн под конкретный запрос – отстроиться от конкурентов и показать премиальность продукта. С помощью выбранных цветов мы подчеркнули, что компания работает на рынке motion-анимации и других сложных механик.

Александра Паршина

ex-заместитель руководителя отдела дизайна TexTerra

Еще несколько трендов в дизайне, которые были актуальны в прошлом 2022 и остаются актуальны в 2023:

• Минимализм и максимум воздуха;
• «Легкие» шрифты с засечками:
• Симметричная верстка – баланс между текстом и изображением на сайте;
• Неоновые оттенки;
• Фотографии реальных людей вместо стоковых изображений;
• Градиенты и размытия;
• Интерактивные элементы в интерфейсах.

1. Акцентная типографика

1. Яркие цвета

1. Коллажи

Святослав Грошев

Арт-директор TexTerra

9. Базовая SEO-оптимизация сайта

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

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

1. Нет ничего, работающего на Flash. Он устарел. Точка.
2. Семантическое ядро собрано конкретно под продвигаемые страницы, а структура сайта полностью ему соответствует.
3. У сайта корректная HTML-карта – страница, где расположены ссылки на полезные разделы сайта.
4. Прописаны meta-данные сайта.
5. Дубли и неуникальные Title и Description отсутствуют.
6. Настроен https-протокол. Если у сайта есть зеркала с www, они «склеены» с основной версией.
7. «Зеркала» на других доменах отсутствуют или склеены с основным сайтом через Redirect 301. В противном случае ждите санкций и блокировки всех сайтов.
8. Зомби-страницы удалены, а дубли склеены через Redirect. Это нужно, чтобы сконцентрировать продвижение на конкретной странице, а не распылять его на 10 разных.
9. Прорисован дизайн + придуманы тексты для страниц 3xx, 4xx, 5xx и для отсутствующих фото товаров в интернет-магазинах. Сбои в работе встречаются у всех, так поднимите же настроение клиентов проработкой таких мелочей.

Страница 404: самые креативные, смешные и лаконичные варианты

1. Файлы сжаты и почти не занимают места. Все они открыты для индексации.
2. На портале присутствуют Sitemap и Robots.txt, которые регулярно обновляются.
3. «Хлебные крошки» – навигационные цепочки, показывающие путь пользователя – настроены.
4. Критические ошибки HTML-кода по стандарту W3C отсутствуют.
5. Сайт уже есть в «Яндексе» и Google. Не помешают также Rambler и Bing. Смотрите на регион ресурса и подбирайте актуальные поисковики для работы.
6. Проработаны URL, где все слова прописаны латиницей. К примеру, если вы ссылаетесь на раздел с MacBook 2020, то URL должен выглядеть как pc / laptops / apple, а не pc / laptops / -3n4oi#4t. Конечно, там нет запрещенных или спам-слов по типу gun, sex, violence. Это нужно делать с любыми товарами в интернет-магазинах.
7. Работа в разных браузерах и системах настроена. Есть 3 варианта работы на «смартах»: мобильная версия (отдельная версия сайта), адаптивная верстка (когда сайт подстраивается под экран устройства, основываясь на user agent) и динамическая верстка (масштабируемый, «резиновый сайт»). Выберите ту, которая больше всего подходит вам (мобильную версию, так как это целый отдельный сайт, может быть дольше и дороже делать).
8. Отзывы. Разместите под каждым товаром раздел отзывов. Также добавляйтесь в «Google Бизнес» и «Яндекс.Бизнес», чтобы люди могли постить про вас отзывы. Реальные отзывы – дополнительный повод доверять компании.

Если это интернет-магазин с карточками товаров, отзывы должны быть всегда.

Во-первых, их можно использовать для SEO. Например, сделав Н2-заголовком и подставлением туда информации из H1. Пример: страница «Акустика FENDER CD-60 DREAD V3 DS BLK WN» – «Мой отзыв о товаре Акустика FENDER CD-60 DREAD V3 DS BLK WN». Это позволит продвинуть запрос со словом «отзыв».

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

Если на сайте больше 1 тыс. товаров, очевидно, что на какие-то товары отзывов не будет. В таких карточках стоит написать что-нибудь в духе «Ищем героя, который сделает 1 шаг в оценке товара».

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

Кстати, отзывы размечайте с помощью микроразметки Schema.org.

alt=»Павел Антипов» width=»500″ height=»500″ />

Павел Антипов

ex-project-менеджер TexTerra

Пример оформления карточки товара – отзывы внизу

В видео ниже рассказали о самых частых ошибках в продвижении сайта. Многие из них связаны с SEO:

10. Скорость работы и загрузки сайта

Чем выше скорость работы, тем меньше людей будет «бесить» долгая загрузка. Это означает то, что они дольше будут сидеть на сайте. В 2023 году стремиться нужно к следующим показателям:

• отрисовка самого крупного контента (LCP) – менее 2,5 сек с начала загрузки страницы;
• задержка после первого ввода (FID) – менее 100 мс;
• совокупное смещение макета (CLS) – менее 0,1.

Для ускорения сайта делается следующее.

1. Минимум редиректов.
2. Сжатая графика, видео и аудио. Держите файлы как в формате WEBP, так и в классических, но сжатых.
3. Подключенные AMP-страницы в Google и турбо-страницы в «Яндексе».
4. Включенный кэш. Если сервер будет кешировать данные юзера, при следующих посещениях сайт не будет загружаться «с нуля», что ускорит время загрузки.
5. Уменьшенное количество запросов к серверу до минимально допустимого значения. Объедините мелкие графические элементы, файлы JavaScript и другую «мелочь», чья прогрузка занимает много времени.

11. Работа с контентом

Приступаем к самому волнующему моменту – наполнению сайта информацией.

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

Это доказывает блог на сайте по производству и продаже арболитовых блоков «Русский Арболит». Если даже они нашли, чем заинтересовать читателей в своем блоге, это сможете и вы.

Даже на сложную тему можно написать интересные статьи

«Русский Арболит» – очень интересный и особенный проект. Например, в дизайне мы используем белые и голубые тона. Они нехарактерны для этой ниши: конкуренты в основном используют коричневый и зеленый, ориентируясь на ассоциации с теплом и натуральностью. Мы сознательно выбрали необычную палитру.

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

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

С контентом тоже вышла интересная история: мы отрабатывали преимущественно ВЧ-запросы, но «с хвостами». То есть, не просто «чем утеплить дом», а «чем утеплить дом из арболита», не просто «как рассчитать количество строительных материалов», а «как рассчитать количество строительных материалов для дома из арболита». Конечно, мы писали исчерпывающие лонгриды по теме основного запроса, делая поправку на арболит.

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

Дарья Завьялова

выпускающий редактор TexTerra

1. Подстраивайтесь под голосовые запросы. Забудьте о «Москва кофе купить молотый». Сегодня время «Окей Гугл, где купить молотый кофе на Таганке?».
2. Максимально структурируйте текст. H1, H2 и т. д. обязательны. «1 абзац = 1 мысль». Добавьте в текст таблицы и списки, где это возможно. Так вы увеличите свои шансы попасть в сниппет выдачи (нулевой запрос).
3. Заполните все meta-данные, alt и title в картинках и видео.
4. Сделайте четкий контент-план. Необязательно, чтобы он был готов на год вперед: бывает так, что актуальное сегодня, уже никому не нужно завтра. Но на какой-то период он должен быть – пусть на неделю или месяц. При этом контент должен выходить регулярно и следовать одной цели – продвижению и продажам.
5. Делайте уникальные тексты. Показатель уникальности полностью зависит от сферы и задач. В некоторых случаях (юридические, медицинские тесты) допустимо и 60-70 %, а где-то нужно хотя бы 80-85 %.
6. Пишите тексты понятным человеческим языком. Конструкции из 2007 «окна москва недорого двери купить» забудьте, как страшный сон.
7. Добавьте на сайт политику конфиденциальности. Это нужно, если вы собираете данные пользователей. Если вы их собираете, а политику конфиденциальности не разместили, можете получить штраф.
8. Убедитесь, что контент быть доступен как в webm-формате, так и в классических форматах по типу jpeg, mp4, aac и т. д.
9. Не привязывайте текст ко времени. Иначе система «свяжет» текст с этим временным промежутком. В долгосрочной перспективе этот материал просто не будет выводиться в начале поиска. Исключения – новости, аналитика и другие вещи, которые актуальны лишь на определенный промежуток времени.

Как в 2 раза увеличить посещаемость вашего блога – работаем с оптимизацией текста

1. Ссылайтесь только на проверенные источники. Поисковые машины уже научились отличать fake news и понижают позиции тем, кто использует их как источники.
2. Убедитесь, что контактные данные актуальны, одинаковы и доступны на всех страницах сайта.
3. Убедитесь, что стили шрифтов, абзацев, междустрочные интервалы, цвета и навигация одинаковы на всех страницах.
4. Проверьте, что CSS, HTML и все сценарии оптимизированы и работают без багов.
5. Проверьте, что фавикон присутствует и отображается корректно.

Фавикон – значок вашего сайта на вкладке

12. Проверка на санкции поисковиков

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

Самые частые причины «фильтрации»:

1. неуникальный контент;
2. вирусы на сайте;
3. внешние ссылки с сайтов с низким доверием, fake news и порталов под «фильтрами»;
4. переоптимизация ключевыми словами;
5. бессистемный линкбилдинг (переспам ссылками);
6. накрутка поведенческих показателей;
7. слишком агрессивная реклама; (в лучшем случае, поисковик выберет из «сети» 1 сайт, а все остальные заблокирует);
8. разные серые технологии по типу фишинга, клоакинга и т. д.

Это только вершина айсберга, который с каждым годом только растет. Самые актуальные списки того, за что сайт может попасть под фильтр, можно найти у самого «Яндекса» и Google.

13. Работа с локальностью

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

1. оптимизируются страницы в «Google Бизнес» и «Яндекс Бизнес»;
2. корректно настраиваются регионы в «Яндекс.Вебмастер» и Google Search Console;
3. правильно прорабатывается микроразметка в разделе «Контакты»;
4. компания добавляется в «Яндекс.Карты», Google Maps, 2ГИС и другие сервисы с картами;
5. с сайта убираются аффилиаты (или у них в контактах другой адрес и телефон);
6. сайт добавляется в тематические справочники: поисковики до сих пор индексируют подобные сайты. Чем больше порталов говорят о вас – тем лучше.

14. Проверка Usability

Предпоследний шаг. Вот что важно на этом этапе:

1. Навигация и сам сайт интуитивно понятны.
2. Карта кликов полностью готова. Все, что мешает, убрано.
3. Кроссбраузерность дополнительно проверена.
4. Все формы работают, письма благодарности написаны и «задевают» ЦА.
5. Все UI-тексты корректны («buy», а не «bye»).
6. Дополнительно проверены линки, перелинки, блоки навигации.
7. Отсутствуют назойливые поп-апы и пуши (как на сайтах с нелегальными онлайн-кинотеатрами).
8. Есть линки на основные social media, кнопки «Поделиться» для всех востребованных соцсетей.
9. В чат-боты загружены все основные вопросы, они понимают «человеческую речь», регулярно обновляются. Есть команды, переключающие сразу на техподдержку.
10. Основные метрики сайта в норме: LCP, FID и CLS.
11. Подключены метрики, отслеживающие посетителей: AOV (средний чек), LCV (жизненная ценность клиента), CPA (цена за целевое действие), CAC (стоимость приобретения клиента), ROI / ROMI (показатели окупаемости кампаний), конверсии, отказы, доля рекламных расходов, метрики аналитики соцсетей и рассылок, ключевые слова, приводящие клиентов.

15. Аналитика

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

(отслеживание скорости загрузки сайта); (общая аналитика сайта); (общая аналитика сайта);
1. панель разработчика в Chrome (вкладка Lighthouse, для исправления ошибок); (исправление ошибок с точки зрения SEO); (общая аналитика сайта); (экспресс-анализ сайта); (анализ обратных ссылок); (аналитика соцсетей); (тулбар для анализа ключевых SEO-параметров на открытых страницах); (поиск и анализ конкурентов); (тестирование сайта реальными посетителями).

Ваша заявка принята.
Мы свяжемся с вами в ближайшее время.

Что еще проверить

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

Лучшие Front-end фреймворки для веб-разработки в 2021 году ⁠ ⁠

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

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

Angular, React, Vue — эти названия широко известны всем программистам. Но вопрос в том, хороши ли они вообще? А может просто переоценено? Узнаем же все плюсы и минусы упомянутых фреймворков, а также многое другое!

Популярность фреймворков за последние 5 лет

За последние 5 лет популярность интерфейсных фреймворков JS неуклонно росла. Интересно, что к концу каждого года спрос резко падает. Только чтобы прийти в норму в январе.

Эти повторяющиеся массивные падения хорошо видны в Google Trends. То же самое произошло и в декабре 2020 года. За последние несколько лет пользователи Google больше всего искали React.js. Angular всегда отставал лишь на небольшой шаг, а Vue.js шел третьим.

Чтобы подтвердить наши выводы, мы перешли на страницу NPM Trends для загрузки фронт-енд фреймворков JS. Было видно такое же падение популярности. На сайте показано, что React.js — это наиболее часто загружаемый фреймворк. Второе место принадлежит jQuery. Vue.js отстает.

Посмотрев на State of JS, мы увидим убедительный результат. Это обзор разработчиков, ориентированных только на JS, приводит нас к выводу, что React пользуется высокой репутацией среди программистов. Это был самый надежный интерфейсный фреймворк JavaScript каждый год. За исключением того случая в 2018 году, когда он разделил первое место с Vue.js. К нашему удивлению, популярность Angular среди пользователей в последнее время падает.

Примерно в начале 2020 года Statista провела онлайн-опрос разработчиков, чтобы изучить популярность веб-фреймворков. Среди наиболее часто используемых интерфейсных фреймворков JS можно увидеть jQuery, React.js и Angular. Честно говоря, ничего удивительного.

Чтобы подтвердить рейтинги, мы рассмотрели StackOverflow и их идеи для разработчиков в начале 2020 года. Результаты были очень похожи на результаты, полученные на Statista.

Это подводит нас к окончательному вердикту. Меняется популярность лучших интерфейсных JavaScript-фреймворков. Тем не менее, те, которые сохранили свою репутацию за последние пять лет, — это Angular, React и Vue.js.

Список фреймворков, которые будут популярны в 2021 году

Мы хотим поделиться с вами нашими прогнозами о главных тенденциях в интерфейсных фреймворках JavaScript на 2021 год. Есть несколько фреймворков, которые, несомненно, сохранят свои позиции. Вот наш шорт-лист на этот год, основанный на анализе прошлых лет и изменении популярности:

Глядя на текущие тенденции, мы понимаем, что среда интерфейсных фреймворков JS процветает. Мы также хотим рассказать о нескольких полезных фреймворках, которые будут использоваться в 2021 году. Даже несмотря на то, что их прайм-тайм ушел:

5 лучших Front-End JavaScript-фреймворков в 2021 году

Давайте внимательнее рассмотрим все основные особенности лучших Фронт JavaScript-фреймворков. После подробного изучения мы выбрали для вас 5 основных.

Более 162 тысяч звезд на GitHub делают React.js действительно заслуживающим доверия. Эта внешняя среда JavaScript с открытым исходным кодом увидела свет в 2013 году. Это произошло благодаря Facebook. Фреймворк был разработан, чтобы позволить дизайнерам и разработчикам создавать современные графические интерфейсы приложений. React.js использует компоненты, которые значительно улучшают весь процесс создания веб-проекта. Благодаря своей высокой эффективности этот JS-фреймворк идеально подходит для приложений с высокой посещаемостью. Как Netflix, Dropbox или Pinterest, которые все основаны на React.js.

React.js — самые важные функции:

— Этот интерфейсный фреймворк работает быстрее других. Благодаря этому программисты могут сэкономить много времени и стать более эффективными.

— По сравнению с Angular продуктивность React постоянно росла, превращаясь в инструмент для создания серьезного и сложного программного обеспечения.

React.js плюсы:

— Хорошая производительность, поскольку он основан на виртуальной модели DOM.

— Его компоненты можно повторно использовать в разных частях приложения.

— Большое сообщество постоянно развивается и делает фреймворк стабильным.

— Он универсален и может использоваться с любыми фреймворками.

— Односторонний поток данных.

Минусы React.js:

— Использование сложного JSX заставляет разработчиков и дизайнеров жаловаться на это.

— Его динамика иногда может влиять на поисковую оптимизацию Google (SEO).

— Поддерживает только результаты внешнего интерфейса.

Angular — фронт-енд JavaScript для веб-приложений, созданная инженерами Google. Они стремились полностью изменить дизайн интерфейсных веб-приложений. Им это удалось? Что ж, если мы посмотрим на его популярность и репутацию, мы можем сказать, что Angular превзошел своего старшего коллегу, jQuery. Приложения Xbox, Forbes и BMW основаны на этой технологии. Все программисты, использующие эту структуру, получают передовой опыт. Наряду с React.js новичкам широко рекомендуется Angular. Но действительно ли это так просто?

Angular — важнейшие особенности:

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

— Angular построен исключительно на TypeScript, что обеспечивает плавную и эффективную работу. Другими словами, TypeScript — это основной язык Angular.

— Это кроссплатформенный фреймворк. Используя Angular, программисты могут создавать веб-сайты, веб-приложения, мобильные приложения и настольные приложения. Довольно аккуратно, да?

Angular плюсы:

— Он автоматически улавливает изменения на уровне модели, самостоятельно изменяя код HTML.

— Простые решения для тестирования на основе Angular поддерживают интеграцию модульных тестов.

— Внедрение зависимостей обеспечивает простой перенос и взаимодействие между всеми компонентами сложной системы.

— Angular отлично работает с внешними библиотеками, такими как jQuery, UnderscoreJS или Ionic framework.

— Встроенная связь REST через $http и $resource

Angular минусы:

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

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

— Для полной индексации сайта вам нужно будет использовать внешние инструменты, которые возвращают правильный HTML-код.

Когда дело доходит до Vue.js, в представлении нет необходимости. Эта внешняя среда JavaScript с открытым исходным кодом модели MVV была впервые представлена в 2014 году Эваном Ю. Он раньше работал в Google, где использовал Angular. Сначала Вы создали облегченную версию того, что ему больше всего нравилось в среде Angular. Теперь, семь лет спустя, Vue.js является одним из наиболее часто используемых в мире интерфейсных фреймворков для JS. Но сможет ли он оправдать свою репутацию?

Vue.js — самые важные функции:

— Он работает как универсальный JavaScript-фреймворк, сочетая в себе самые удивительные инструменты из Angular, React и Ember. И он легче своих предшественников.

— Эта структура работает с виртуальной DOM и использует двустороннюю привязку. Все это делает Vue.js сложным и современным решением для разработки сложных веб-приложений.

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

Плюсы Vue.js:

— Серверный рендеринг на основе того, что предоставляет Angular2 и React.

— Скорость и эффективность как для одностраничных, так и для многостраничных проектов.

— Интуитивно понятные функции и простой синтаксис делают этот фреймворк простым в освоении для новичков.

— Поддерживает эластичное и гибкое программирование на основе понятного и читаемого кода.

— Поддерживает использование машинописного текста.

Минусы Vue.js:

— Небольшая поддержка. За Vue.js. не стоит крупная корпорация. Это делает его менее предпочтительным для продвинутых программистов, которые привыкли к другим фреймворкам JavaScript.

— Гибкость. Не поймите неправильно. Это также преимущество Vue.js. Но в то же время выбор множества компонентов может вызвать проблемы. Особенно при реализации масштабного проекта, над которым работает много программистов.

— Языковой барьер. Многие из новых механизмов и плагинов, используемых в Vue.js, написаны на китайском языке.

Backbone.js — это еще один стабильный фреймворк JavaScript для веб-приложений. Он был выпущен в 2010 году. Его создатель Джереми Ашкенас также известен благодаря CoffeeScript и Underscore.js. Эта облегченная структура JS обрабатывается моделью MVC. Он предназначен для разработчиков, работающих над одностраничными веб-приложениями. Backbone.js широко используется, и его популярность растет с каждым годом. Веб-приложения, построенные на этой платформе, включают, среди прочего, Airbnb, Hulu, SoundCloud или Verizon.com .

Backbone.js — самые важные функции:

— Легкая в освоении эта интерфейсная среда позволяет программистам разрабатывать клиентские веб-приложения и мобильные приложения.

— Он принимает императивную парадигму программирования при работе с DOM. Другими словами, Backbone состоит из команд, которые должны выполнять приложения.

— Backbone.js совместим с REST API, что делает его безупречным для синхронизации между бэк и фронт фреймворками.

Backbone.js плюсы:

— Обеспечивает быструю и плавную работу.

— Новичкам очень легко изучить эту внешнюю среду JavaScript для веб-приложений.

— Основанный на библиотеке с открытым исходным кодом, он имеет более 100 пользовательских рабочих расширений.

— Его модели и коллекции совместимы с архитектурой RESTful. Вы можете удобно получить их данные с сервера.

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

Backbone.js минусы:

— Чтобы писать более сложные приложения, программистам необходимо загрузить дополнительные плагины и расширения.

— Небольшой размер. В то же время это преимущество. Тем не менее, если вы хотите использовать Backbone.js в полной мере, вам необходимо добавить в свой проект фреймворки Underscore.js и jQuery.

— Backbone.js не имеет готовых структур. В нем есть только несколько очень простых инструментов для разработки макета приложения.

Другой широко используемый и известный фронт фреймворк JavaScript — это Ember.js. Созданный в 2011 году Иегудой Кац, он настоятельно рекомендуется профессиональными кодировщиками, работающими над передовыми решениями. За этой структурой стоит заинтересованное сообщество, так как она основана на механизмах с открытым исходным кодом. Ember.js фокусируется на предоставлении инструментов высочайшего качества для клиентских веб-приложений и мобильных приложений. Прямо сейчас некоторые из самых известных веб-сайтов, использующих эту структуру, включают Apple Music, Discourse, LinkedIn и Twitch.

Ember.js — самые важные функции:

— Двусторонняя привязка данных, как в Angular.js. Эта функция синхронизирует и модель, и вид.

— Наличие Fastboot.js позволяет ускорить рендеринг всех серверных DOM и повысить производительность сложных интерфейсов.

— Ember.js — лишь один из основных компонентов сложного стека внешнего интерфейса, подготовленного командой Ember. Эти решения также включают Ember CLI, Ember Data, Ember Inspector, Fastboot и Liquid Fire.

Плюсы Ember.js:

— Он использует простые для понимания шаблоны, позволяющие легко и гибко разрабатывать пользовательский интерфейс.

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

— Простая отладка благодаря решениям Ember Inspector.

— Пользователи получают хорошую документацию по фреймворку JS.

— Все используемые шаблоны можно предварительно скомпилировать на сервере.

Минусы Ember.js:

— Изучение фреймворка считается трудным. Ember.js рекомендуется продвинутым пользователям, хорошо разбирающимся в интерфейсных фреймворках JS.

— Он не использует простые модели JavaScript, что делает веб-приложения более сложными, чем в случае с Angular.js.

— За Ember.js стоит относительно небольшое сообщество. Поэтому поиск решения ваших проблем может занять немного больше времени.

Обзор других фреймворков

Мы выбрали три других JS-интерфейсных фреймворка, о которых стоит упомянуть. Даже если они не так популярны, как упомянутые ранее. Давайте взглянем на них бегло.

Ext JS, фронт-енд JavaScript-фреймворк для веб-приложений, был представлен в 2007 году. Сначала он был построен как расширение библиотеки-надстройки YUI. Использование внешних фреймворков с Ext JS необязательно. Эта технология может работать совершенно независимо. Возможно, это не самый популярный интерфейсный фреймворк, но он работает довольно хорошо. Особенно при создании динамических сеток для статических веб-страниц или разработке одностраничных веб-приложений.

Плюсы Ext JS:

— Использует множество виджетов, упрощает работу и вносит изменения.

— Существует надежное сообщество, предоставляющее хорошую документацию и руководства.

Это делает этот фреймворк интересным вариантом для начинающих программистов.

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

Минусы Ext JS:

— Бесплатная версия Ext JS имеет ограниченную поддержку пользователей, и у пользователей могут возникнуть проблемы с отладкой.

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

Svelte — относительно молодой фронт фреймворк JavaScript, основанный на его предшественнике Reactive.js. Первая версия этого бесплатного фреймворка с открытым исходным кодом была выпущена в 2016 году. Программисты могут использовать Svelte прямо в браузере, что является нововведением по сравнению с его конкурентами. Поскольку он является одним из последних фреймворков JS-интерфейса, он все еще не имеет интегрированного сообщества. Может быть, в ближайшие годы это изменится. Будем внимательно следить за этим.

Плюсы Svelte:

— Легкие и, следовательно, более быстрые, чем другие интерфейсы.

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

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

Минусы Svelte:

— За фреймворком стоит небольшое (но постоянно растущее!) Сообщество. Становится сложно решить некоторые проблемы, которые могут возникнуть у начинающих программистов при изучении этой библиотеки.

— Для небольших проектов рекомендуется использовать Svetle. Доступных дополнительных инструментов по-прежнему недостаточно, чтобы помочь кодерам работать в больших масштабах.

Сначала вы можете спутать Preact с React. Однако первый фреймворк намного легче и быстрее. Переход на Preact — хорошая идея для всех разработчиков, работающих с JavaScript. Использование этого фреймворка определенно сделает все веб-приложения более адаптивными и быстрее работают. У этого есть и обратная сторона. Вы можете потерять несколько функций React. Будет ли Preact когда-нибудь так популярен, как другие фреймворки? На данный момент трудно сказать.

Плюсы Preact:

— Легкий, портативный и совместимый с библиотеками React.

— Высокая эффективность позволяет кодировщикам работать без проблем и создавать более легкие версии веб-приложений.

— У него больше функций, чем у React-lite framework.

Минусы Preact:

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

— Preact предоставляет только функциональные компоненты без сохранения состояния и компонент, зависящий от ES6.

Какие фреймворки Frontend JS следует изучить в 2021 году?

Итак, вы собрались изучить новый фронт фреймворк JavaScript в 2021 году? Затем вы должны спросить себя, чего вы хотите достичь. Найдите свою цель, а затем ищите средства для ее достижения. Есть несколько замечательных фреймворков для начинающих, у которых нет опыта работы с JavaScript. Лучший фронт JS фреймворк для начала — React.js. Благодаря известному сообществу пользователей новичкам будет легко искать решения проблем.

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

Почему это? Потому что таким технологиям, как Preact, Svetle и Ext JS, нужны профессионалы, которые помогут будущим программистам решить существующие проблемы.

Какой JS Frontend Framework выбрать для разработки вашего проекта в 2021 году?

Когда вы считаете себя профессиональным пользователем JavaScript, нет никаких ограничений в отношении фреймворков, которым вы можете доверять. Если вы ищете лучший фреймворк JS для проектирования и разработки крупномасштабного проекта, выберите Angular. Это будет одна из хорошо поддерживаемых разработок JS в 2021 году. Ваша работа может быть намного проще и быстрее, чем когда-либо, благодаря использованию TypeScript.

Еще одна замечательная идея — попробовать Vue.js. Он известен своей популярностью среди пользователей. Неудивительно, почему — в нем собраны все лучшие функции от Angular и React. И он также работает с TypeScript для повышения производительности и эффективности. Эта структура поддерживается большим сообществом программистов, которые готовы помочь в случае необходимости. С таким мощным инструментом ваш следующий большой проект приложения в 2021 году будет иметь потрясающие результаты.

Хотим, чтобы вы запомнили еще одну вещь. Фреймворки JavaScript постоянно развиваются. И для веб-приложений, и для мобильных. Все они предоставляют различные библиотеки, функции и расширения. Некоторые подходят для одностраничных веб-приложений, другие лучше работают с более крупными проектами. Окончательное решение по-прежнему остается за вами, независимо от того, для чего вы планируете использовать фреймворки. Никогда не стоит просто плыть по течению. Не полагайтесь только на популярность веб-фреймворка. Выбирайте фреймворки, которые удовлетворят ваши потребности.

Понравилась ли статья? Напишите отзывы, будем продолжать? 🙂

«Интересно, что к концу каждого года спрос резко падает.»

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

А после новогодних снова жрать хочется))))

Таки что сложного в JSX? Это же одна из самых простых концепций, к которой можно привыкнуть за пару дней. И это скорее плюс, чем минус. На мой некомпетентный взгляд, у React есть такие весомые минусы, не перечисленные в статье, как: 1. Реакт вообще не фреймворк, а библиотека (утверждение, конечно, спорное, но так написано в доке) для эффективной отрисовки UI. Соответственно, никаких требований к архитектуре приложения реакт не выдвигает. Каждый разраб волен городить свой огород. Этот пункт можно отнести как к плюсам так и к минусам. 2. Вытекает из первого пункта: у React мало что идёт «из коробки» (например, нет роутинга). Сам по себе чистый реакт используется редко, поэтому к React нужно добавить redux, react-redux, redux-thunk, redux-saga, reselect или MobX. 3. Хуки и классы. Нужно учить два API жизненного цикла. 4. С производительностью не всё однозначно. Присутствуют лишние рендеры. А чтобы их не было нужно хорошо разбираться в тонкостях реакта. 5. Отдельно выделю redux, поскольку он часто используется в связке с реактом. Чистые функции (редьюсеры), иммутабельность и огород из action-creators, санок, саг и прочих селекторов могут вынести мозг некоторым разработчикам.

Безусловно, всё написанное выше моё ИМХО. Возможно, более опытные разработчики меня поправят (за что я им буду благодарен, например)

как перфоманс в рантайме экономит время разработчика или влияет на скорость его работы?

по поводу SEO: во-первых — поисковики умеют индексировать SPA, во-вторых — серверный рендеринг есть как минимум у большой тройки

здешний обзор фреймворков считаю не только бесполезной, а даже вредной частью

Почему ни в какой другой сфере айти нет такого зоопарка фреймворков, который обновляется каждый месяц?

Вопрос всегда интересовал, вот всему этому охулиарду фронт-эндщиков, кто бэки пишет?

Удалёнка⁠ ⁠

Когда стал работать удалённо — радости не было предела, ведь я буду 24/7 дома.
А оказалось, я 24/7 на работе.
Всем спасибо. 😀

Чем старше разработчик, тем больше комментариев⁠ ⁠

Клавиатурный КПК Psion Series 3 — детальный обзор в домашних условиях⁠ ⁠

Автор: MaFrance351

Оригинальный материал

Дополнительные фото, ссылки, а также информация по КПК в источнике материала. Всё попросту не влезло 🙁

Что вы в первую очередь представляете себе при упоминании компании Psion? Series 5mx? Revo? Series 3? Organiser? Какую-то ретро-экзотику типа Netbook, MC, HC или Workabout? Или, может, вы думаете о начале эпохи Symbian?

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

Итак, в сегодняшней статье рассмотрим один из таких девайсов — Psion Series 3. Узнаем, что он может и для чего может пригодиться.

❯ Суть такова

Чем же так примечателен Psion Series 3? Сложно сказать. Первым клавиатурным КПК он явно не является, тот же Atari Portfolio куда старше. Первым устройством на ОС SIBO/EPOC16 — тоже, на момент появления данного устройства уже существовали те же Psion MC под управлением той же ОС. Про популярность тоже не всё так однозначно — Series 5 встречался куда чаще (впрочем, ныне обе модели являются редкостью и при появлении на вторичке обычно быстро выкупаются). Скорее, дело тут именно в его операционной системе, конструкции, качестве сборки, удобстве использования. В том, за что Psion и получила столько любителей.

Небольшой обзор Psion 3 был на MyPsion.ru , однако там много неточностей (например, сказано, что третий Psion, внезапно, является последователем на деле вышедшей пятью годами позже Siena).

❯ Немного истории

Series 3 в линейке КПК Psion является последователем Organiser и Organiser II. В отличие от них, данный экземпляр работает на базе ОС EPOC16 и оснащён системой на чипе на базе процессора с архитектурой X86. Аппарат появился в далёком 1991 году и является первым девайсом Psion в таком форм-факторе. Экземпляр пользовался большим успехом, о чём говорит то, что выпускался он на протяжении семи лет, в ходе которых было выпущено несколько модификаций данной модели. Производство было свёрнуто лишь после выхода пятой версии с ARM-процессором и ОС EPOC32.

Также существовал Acorn PocketBook — по сути тот же Psion 3, но с несколько изменённым набором штатных приложений, предлагавшийся для образовательных целей. Приложения, периферия и модули памяти Psion и Acorn были совместимы между собой.

На волне успеха третьей серии был выпущен Siena, представляющий собой несколько усечённую версию модели 3c (как Psion Revo были таким же дешёвым аналогом пятой серии). В нём не было микрофона, а также использовались другая матрица клавиатуры, дисплей меньшего разрешения и более слабый процессор.

Дольше всех продержались промышленные образцы: Workabout выпускался вплоть до начала нулевых и стал последним производившимся устройством на базе SIBO (EPOC16), получив огромное количество модификаций: разные порты, разные типы сканеров, разные способы подключения. На базе ОС EPOC32 (как и на Symbian) терминалов сбора данных не выпускалось, в дальнейшем Psion PLC в своих устройствах Workabout Pro перешла на обычную Windows CE.

❯ Обзор оборудования

Итак, рассмотрим поподробнее наш аппарат.

Устройство сделано из очень качественного и приятного на ощупь пластика. Практически ничего не люфтит и не поскрипывает, что, разумеется, не может не радовать. В сложенном виде девайс достаточно легко влезает даже в карман джинсов и по размеру напоминает powerbank средней ёмкости или типичный электронный органайзер девяностых. Аппарат в меру тяжёлый, при встряхивании ничего не гремит и не болтается, за столько лет пластик практически целиком сохранил былую прочность. Аппарат очень компактный, на КДПВ HP 620LX по сравнению с ним кажется нетбуком.

С обратной стороны спикер, по его периметру наклейка с серийным номером. По бокам две крышки для установки модулей памяти (Psion SSD). Сверху крышка батарейного отсека.

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

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

Слева разъём для подключения проприетарного кабеля 3Link. Увы, рабочий его вариант найти мне так и не удалось. Почему это так печально и почему его нельзя спаять самому, расскажу чуть позже. К слову говоря, в разъёме штырьки, а не гнёзда: при вставке коннектора пластиковая часть сдвигается вглубь.

Справа разъём для подключения внешнего блока питания с разъёмом 4,0*1,7 мм. Если бы не «инверсная» полярность (центральный контакт — «минус») и не напряжение в девять вольт, сюда бы идеально подошёл блок питания от типичного КПК на Windows Mobile или от Sony PSP.

Откроем крышку. На ней у нас находится ЖКИ с разрешением 240*80, справа несколько надписей о преимуществах данного аппарата. Под дисплеем панелька с плёночными псевдосенсорными кнопками быстрого запуска. Ещё чуть ниже клавиатура. Конечно, верхом удобства она не является: «калькуляторные» кнопочки далеки от клавиш того же Series 5, но всё же. На цифровые клавиши назначено сразу по два символа — один печатается при помощи Shift, второй — при помощи специальной клавиши с логотипом Psion. Рядом с кнопкой Esc небольшое отверстие кнопки перезагрузки, для Hard Reset необходимо нажать её, удерживая правый Shift.

Конструкция корпуса весьма интересная — при закрытии крышки панель с кнопками складывается. Это хорошо видно в одном из промежуточных положений. Решение красивое, но не самое надёжное. немало девайсов отправились на покой по причине сломанных петель или перегнувшегося шлейфа (хотя в экранном шлейфе всего шестнадцать жил, так что в случае перегиба его можно будет попробовать заменить даже на жгут из тонкого МГТФ).

Сбоку в разложенном виде КПК напоминает телефоны-раскладушки — точно так же нет промежуточных положений, да и корпус чем-то похож.

Модуль памяти. Представляет собой блок с неким проприетарным интерфейсом. Помимо Flash, были SSD на базе RAM (с батарейкой внутри) и ROM (с коробочными версиями софта для Psion).

❯ Характеристики

Аппарат работает на базе проприетарного чипа NEC, основанного на процессоре NEC V30H архитектуры X86. Частота его составляет 7,68 МГц. Аппарат имеет двести пятьдесят шесть килобайт оперативной памяти, служащие одновременно в качестве ОЗУ и RAM-диска. Экран чёрно-белый, не оснащён ни подсветкой, ни сенсором. Беспроводных интерфейсов также нет, даже ИК-порта.

В дальнейшем было выпущено несколько модификаций оригинальной модели: 3a с увеличенным разрешением экрана, более мощным процессором и микрофоном, 3c с подсветкой, ИК-портом и доработанным последовательным интерфейсом, 3mx с ещё более мощным процессором и более быстрой связью по RS-232. Был также Psion 3aR, представлявший собой 3a со вшитым в память русификатором.

❯ Питание

КПК питается от двух батареек типа AA. Я замерил его потребление: в рабочем режиме — 55 мА, при погашенном экране — 0,4 мА. При средней ёмкости «пальчиковых» батареек в 1500 мА*ч это даёт примерно сутки непрерывной работы и многомесячное лежание в ящике. При типичном использовании батареек хватало где-то на месяц.

Разумеется, подключение периферии влияет на потребление, хоть и незначительно. А вот передача данных расходует заряд куда сильнее, в руководстве по программированию даже были рекомендации подключать внешнее питание для «девелоперского» устройства: при постоянно поднятом соединении батарейки садились достаточно быстро.

❯ Про внутренности

Разбирать свой аппарат не стал: он на пломбе, которую мне не хотелось отрывать. Фото внутренностей Series 3 я, увы, не нашёл.

А вот видео с разборкой Series 3a. Видна и частая проблема таких девайсов в виде треснувших петель.

❯ Запуск

Ну что же, с аппаратной частью разобрались. Пробуем запускать.

Вставляем батарейки и жмём «ON», после чего девайс выводит заставку Psion и в течение нескольких секунд запускается.

Разумеется, батарейка давно села, отчего память стёрлась. Часы по умолчанию установлены на третье сентября 1991 года.

Зышщт третьей версии работает под управлением SIBO (Sixteen Bit Organizer, также встречается Sixteen Bit OS), она же EPOC16. ОС эта на тот момент не была чем-то инновационным, однако для органайзера она была просто идеальна. Крайне низкие системные требования, стабильность, простота в использовании — всё, что так надо для карманного устройства.

❯ EPOC16

Тому, кто до этого не сталкивался с такими машинками, отсутствие сенсорного экрана может показаться непривычным (в особенности, если у него уже был клавиатурный КПК на базе Windows CE или EPOC32). Но всё это быстро проходит, стоит только взять аппарат в руки: управляется он чрезвычайно удобно. Отзывчивость находится где-то на уровне приложений MS-DOS или Mac OS эпохи MC68000.

ОС встречает нас главным экраном. При этом названия запущенных приложений выделены жирным. Чтобы закрыть приложение, необходимо навести указатель на его иконку и нажать Delete. Нажатие кнопки System на панели быстрого запуска с зажатой клавишей Shift выполняет роль Alt+Tab на десктопных машинах.

Первое приложение — Data, адресная книга, она же база данных. Собственно, одно из самых главных приложений для электронного органайзера.

Примерно так могла когда-то выглядеть заполненная запись (разумеется, данные указаны чисто для примера).

Здесь также есть интересная возможность набора номера прямо с КПК. Для этого жмём на клавиатуре Psion+Help, а в открывшемся окне — Tab. После этого надо снять трубку с телефона и приложить спикер КПК к микрофону. Разумеется, работать это будет, только если АТС поддерживает тоновый набор.

Также можно набрать номер и вручную.

Мировое время. Родного Челябинска в базе почему-то нет (равно как и Екатеринбурга, Питера. Новосибирска), из российских городов есть только Москва.

За тридцать лет много чего случилось в этом мире. Но старому КПК с его прошивкой, записанной в однократно программируемую ПЗУшку, дела до этого нет…

А вот и простые часы. Поддерживается установка до четырёх будильников, ниже указано наше «домашнее» местоположение, в качестве которого по умолчанию стоит Вашингтон.

Текстовый редактор, как же без него.

Это не просто местный аналог EDIT.COM или «Блокнота», тут есть даже некоторая поддержка стилей текста.

Календарь, он же ежедневник. Он тут примерно такой же, как и в большинстве КПК того времени. Диапазон дат здесь ограничен диапазоном доступного к установке системного времени — от первого января 1980 до тридцать первого декабря 2049. Для интересующихся, что же будет после этого дня: часы продолжают идти, дата отображается, а вот календарь больше не работает, пишет при запуске «Out of range»…

Калькулятор. Он тут повторяет печатающие модели, ведя журнал операций. Но на этом его сходство с банковским собратом заканчивается. Есть тригонометрия, степени, логарифмы и антилогарифмы, поддерживается даже выполнение программ на языке OPL.

❯ 3Link и SSD

Psion в какой-то степени похож на Apple примерно тех же годов. Всё такое же красивое, эпичное, удобное в использовании и… проприетарное. И это касается как модулей памяти, так и кабеля для подключения к компьютеру. Всё это добро оказалось чрезвычайно редким. Возможно, это из-за того, что в комплекте с машинкой данных причиндалов не поставлялось.
Чтобы подключить КПК к компьютеру, было необходимо купить кабель 3Link (фото с eBay) и ПО PsiWin (ну, или PsiMac).

В чём же сложность подключения Psion 3 к компьютеру при отсутствии кабеля? Ведь кажется, что всё просто: спаяй кабель, воткни его в машинку, и будет счастье. Ан нет. Почему же так?

Есть такой документ как SIBO HDK, он же Hardware Development Kit. Что же там говорят по поводу внешних интерфейсов? Наружу выведен отнюдь не RS-232 или что-то подобное, а некий «SIBO Serial Channel», имеющий линии DATA и CLK. Внутри этой коробочки на кабеле 3Link находится какой-то заказной чип (в документации именуемый «ASIC-5»), позволяющий преобразовывать эти сигналы в стандартный последовательный RS-232 или параллельный IEEE-1284 (да, существовал специальный адаптер для подключения КПК к принтеру). Помимо всего прочего 3Link содержит в себе ПЗУшку с какой-то прошивкой, позволяющей определяться этой схеме именно как «Remote link». Как вы, наверное, уже поняли, SSD тоже основан на проприетарных чипах. Так что увы, так просто собрать это не выйдет. Никаких проектов реплики SSD или кабеля я не нашёл. Некоторые изыскания проводились в рамках проекта The Last Psion, но направлен он больше на считывание информации с модулей памяти, а не на их эмуляцию.

Кстати, в итоге система эта потерпела сокрушительный провал, связанный с тем, что Psion банально не смогла заказать нужное количество чипов, чтобы продавать их разработчикам периферии. В версии 3c интерфейс 3Link был заменён на нормальный RS-232. Hardware Development Kit навсегда ушёл в историю, оставив на память лишь PDFку с документацией и кучку проприетарных микросхем в уцелевших кабелях и SSD.

Возможно, если раздобыть оригинальный 3Link и потыкать логическим анализатором, можно собрать реплику такого девайса на базе какого-нибудь МК, как это было сделано для Psion Organiser. Но, сдаётся мне, не всё так просто…

❯ Ну так что же?

Безусловно, Series 3 оказался крайне интересным экземпляром. Увы, при отсутствии кабеля и модулей памяти использовать его получится только как электронный органайзер. Тем не менее, девайс привлекает как операционной системой (на тот момент крайне функциональной даже при стандартном наборе приложений), так и аппаратными решениями (зачастую крайне неоднозначными).

Другие мои статьи на тему EPOC16

Программирование под SIBO (EPOC16) в наши дни — где найти SIBO C SDK и как собрать простейшую программу с его помощью

Подпишись на наш блог, чтобы не пропустить новые интересные посты!