Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Магически исчезающий JS фреймворк

JavaScriptSvelteJS
Довольно странно, но до сих пор на Хабре нет ни одной статьи об этом, как минимум, очень интересном инструменте разработки. Возможно это связано с тем, что данный фреймворк довольно молод, также как и идея, лежащая в его основе. А может быть все дело в постоянном хайпе разжигаем вокруг «большой тройки» фронтенда и закрывающем обзор альтернативных решений. Точно не знаю, но постараюсь исправить данный просчет в этой статье. Не переключайтесь.

          imageimage
Читать дальше →
Всего голосов 23: ↑16 и ↓7+9
Просмотры28K
Комментарии 48

1Kb autocomplete

JavaScriptSvelteJS
Tutorial
Всем бодрого времени суток! Вдогонку к моему предыдущему посту, хочу показать простой пример микро-компонента автокомплита на SvelteJS. Кто еще не успел познакомиться с данным мирко-фреймворком — велком под кат!
image
Читать дальше →
Всего голосов 15: ↑14 и ↓1+13
Просмотры8.2K
Комментарии 10

SvelteJS: Релиз второй версии

Разработка веб-сайтовJavaScriptКлиентская оптимизацияHTMLSvelteJS
Буквально вчера вышла 2-я версия молодого, но весьма многообещающего фреймворка SvelteJS. Версия мажорная, а значит содержит не только новые фичи и исправленные баги, но и соответствующие «breaking changes». Что новенького предлагает разработчикам новая версия и почему Svelte стал еще лучше, читайте под катом.
image
Читать дальше →
Всего голосов 21: ↑21 и ↓0+21
Просмотры13K
Комментарии 97

Исчезающие фреймворки

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

Спасибо и хорошего прочтения!

Читать дальше →
Всего голосов 50: ↑48 и ↓2+46
Просмотры46K
Комментарии 180

Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp»

Разработка веб-сайтовJavaScriptReactJSVueJSSvelteJS
Это небольшая ответная статья на публикацию «Сравнение JS-фреймворков: React, Vue и Hyperapp». Вообще я не большой фанат подобных сравнений. Однако раз уж речь зашла о таком маргинальном фреймворке, как Hyperapp, в сравнении с мастодонтами, типа React и Vue, я подумал, почему бы не рассмотреть все те же примеры на Svelte. Так сказать, для полноты картины. Тем более, это займет буквально 5 минут. Поехали!

image
Читать дальше →
Всего голосов 41: ↑31 и ↓10+21
Просмотры15K
Комментарии 85

Пишем компонент с «материальными» кнопками для Svelte

Разработка веб-сайтовJavaScriptHTMLSvelteJS
Из песочницы
Tutorial
Вдохновившись статьями SvelteJS: Релиз второй версии, Исчезающие фреймворки и Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp», про «исчезающий» фреймворк Svelte (читается «свелт», а то мало ли), я захотел его попробовать. И, для начала, решил написать небольшой компонентик с кнопками из Materialize.
Читать дальше →
Всего голосов 10: ↑10 и ↓0+10
Просмотры5.1K
Комментарии 2

Как сделать поиск пользователей по GitHub без React + RxJS 6 + Recompose

Разработка веб-сайтовJavaScriptReactJS
Tutorial
Эта статья является ответом на статью-перевод «Как сделать поиск пользователей по GitHub используя React + RxJS 6 + Recompose», которая буквально вчера научила нас как надо использовать React, RxJS и Recompose вместе. Что ж, предлагаю теперь посмотреть, как это можно реализовать без оных инструментов.


Читать дальше →
Всего голосов 31: ↑26 и ↓5+21
Просмотры4.8K
Комментарии 20

Легенда о Фреймворке Всевластия

Разработка веб-сайтовJavaScriptКлиентская оптимизацияReactJSSvelteJS
Tutorial
В последнее время набирает популярность тренд «исчезающих фреймворков», локомотивом которого, без сомнения, можно считать SvelteJS — buildtime-фреймворк и компилятор в ванильный javascript.

Несмотря на то, что концептуально Svelte весьма прост, а в использовании еще проще, многие разработчики задаются вопросом, в чем же killer-фича данного фреймворка, да и подхода в целом? Почему это не «yet another javascript framework»?

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

Давайте разберемся, но сначала я расскажу вам одну легенду…


Читать дальше →
Всего голосов 33: ↑24 и ↓9+15
Просмотры12K
Комментарии 12

Аскетичный вебъ: прототип барахолки на go и js

Разработка веб-сайтовJavaScriptGo
Из песочницы

screenshot


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


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


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

Читать дальше →
Всего голосов 20: ↑19 и ↓1+18
Просмотры9.3K
Комментарии 6

У дизайнера новая идея? Что может быть проще

Разработка веб-сайтовCSSJavaScriptHTMLSvelteJS
Tutorial
Привет, хабровчанин! Дизайнеры люди идейные, а заказчики с их бизнес-требованиями, тем более.

Представь, что ты сваял свой самый лучший UIkit на свете на самом крутом %вставить свое% JS фреймворке. Казалось бы, там есть все, что нужно проекту. Теперь-то ты сможешь пить кофе, а все новые задачи закрывать накидыванием компонентов на страницу. Еще лучше, если ты нашел такой UIkit на помойке на просторах NPM и он идеально соответствует текущему UX/UI и его потребностям. Фантастика!

И действительно… кого я обманываю? Твое счастье, скорее всего, будет недолгим. Ведь когда дизайнер прибежит с талмудом новых UI-решений для очередной страницы или «спец-проекта», что-то по-любому пойдет не так.

В этот момент перед разработчиком встает вопрос «DRY или не DRY»? Стоит ли как-то кастомизировать существующие компоненты? Да еще так, чтобы не отхватить регрешн на существующих кейсах. Или же действовать по принципу «работает — не трогай» и написать новые компоненты с нуля. При этом, раздувая UIkit и усложняя поддержку.

Если ты, как и многие, бывал в такой ситуации, загляни под кат!


Читать дальше →
Всего голосов 18: ↑18 и ↓0+18
Просмотры4.9K
Комментарии 3

Почему SvelteJS возможно лучший фреймворк для новых веб-разработчиков

Разработка веб-сайтовJavaScriptПрограммированиеHTMLSvelteJS
Перевод


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

Лет 10 назад ответ был очень прост. Просто создайте index.html, добавьте туда несколько тегов, сделайте заголовок красным с помощью CSS и подключите JQuery для обработки кликов!

Ох, как же все изменилось. Теперь мы работаем с инструментами сборки, маршрутизацией на стороне клиента, специальными фреймворками с причудливым рантаймом, привязывая везде «this», шаблонными литералами, CSS-in-JS… как же выбрать то, что важнее всего?
Читать дальше →
Всего голосов 33: ↑27 и ↓6+21
Просмотры75K
Комментарии 130

Svelte 3: Переосмысление реактивности

Разработка веб-сайтовJavaScriptКлиентская оптимизацияHTMLSvelteJS
Перевод
Буквально на днях произошло большое событие для сообщества SvelteJS, да и вообще, как мне кажется, для всего современного фронтенда — долгожданный релиз Svelte 3! Посему, под катом перевод статьи автора Svelte и прекрасное видео с его доклада на YGLF 2019.


Читать дальше →
Всего голосов 27: ↑25 и ↓2+23
Просмотры29K
Комментарии 288

Исчезающие фреймворки

Блог компании Конференции Олега Бунина (Онтико)Разработка веб-сайтовJavaScriptAngularSvelteJS
Почему мы используем фреймворки? Angular, React и Vue помогают нам строить сложные веб-приложения: структурировать код, управлять состоянием и разрабатывать сложные интерфейсы. За последнее десятилетие фреймворки стали стандартом. Дорогим стандартом. С тех пор как фреймворки вошли в обиход, JS сильно раздуло. Страниц весом несколько мегабайт становится больше, и существенная часть этого объема — фреймворк сам по себе. Кажется, это немного, но для пользователя критично — на телефоне или слабом интернете страница может даже не загрузиться. Это проблема.



Кроме лишнего веса у классических фреймворков много других минусов и они подходят не для всех проектов. Эти проблемы решены в «исчезающих фреймворках». Что это за новый тренд, почему это не «еще один JS-фреймворк», а хорошая идея и как таинственные фреймворки могут улучшить наши приложения, расскажет Павел Малышев.
Читать дальше →
Всего голосов 60: ↑51 и ↓9+42
Просмотры45K
Комментарии 61

Пишите меньше кода

Разработка веб-сайтовJavaScriptReactJSVueJSSvelteJS
Из песочницы

Хайп по Svelte после недавнего релиза 3 версии фреймворка всё-таки имеет место быть, чему свидетельствуют сильно возросшее комьюнити и огромное количество вопросов как в официальном чате, так и в нашем рускоязычном telegram-канале. Всё больше разработчиков украдкой или всерьёз присматриваются к этой технологии и задумываются о её применении в своих новых проектах. Для этих разработчиков и всех прочих интересующихся темой максимально эффективного написания кода, Rich Harris, автор и идеолог фреймворка, опубликовал статью о том, как Svelte помогает разработчику минимизировать усилия при создании современных реактивных web-приложений, перевод которой я и предлагаю ниже.

Читать дальше →
Всего голосов 60: ↑48 и ↓12+36
Просмотры30K
Комментарии 326

Разрабатываем игру на Svelte 3

Разработка веб-сайтовJavaScriptРазработка игрSvelteJS
Tutorial

Чуть больше месяца назад вышел релиз Svelte 3. Хороший момент для знакомства, — подумал я и пробежался по отличному туториалу, который еще и переведен на русский.


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


image

Читать дальше →
Всего голосов 27: ↑26 и ↓1+25
Просмотры11K
Комментарии 32

Настоящее реактивное программирование в Svelte 3.0

Разработка веб-сайтовJavaScriptReactJSSvelteJS
Перевод

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


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


Читать дальше →
Всего голосов 26: ↑22 и ↓4+18
Просмотры14K
Комментарии 212

Tic Tac Toe, часть 0: Сравнение Svelte и React

Разработка веб-сайтовJavaScriptПрограммированиеReactJSSvelteJS
Из песочницы
Tutorial
Tic Tac Toe, часть 0: Сравнение Svelte и React
Tic Tac Toe, часть 1: Svelte и Canvas 2D
Tic Tac Toe, часть 2: Undo/Redo с хранением состояний
Tic Tac Toe, часть 3: Undo/Redo с хранением команд
Tic Tac Toe, часть 4: Взаимодействие с бэкендом на Flask с помощью HTTP

На сайте React'a есть туториал, в котором описывается разработка игры Tic Tac Toe. Я решил повторить разработку этой игры на Svelte. Статья охватывает только первую половину туториала, до реализации истории ходов. Для целей ознакомления с фреймворком этого вполне достаточно. Каждый раздел статьи соответствует разделу туториала, содержит ссылки на исходный код обоих фреймворков.

Читать дальше →
Всего голосов 27: ↑21 и ↓6+15
Просмотры8.5K
Комментарии 22

Почему я не использую веб-компоненты

Разработка веб-сайтовJavaScriptHTMLSvelteJS
Перевод

Я пишу это в основном для себя в будущем, чтобы у меня было куда сослаться, когда кто-нибудь спросит меня, почему я скептичен в отношении веб-компонентов и почему Svelte не компилируется в веб-компоненты по умолчанию. (Тем не менее, он может компилироваться в веб-компоненты, а так же интегрироваться с ними, что подтверждается превосходной оценкой на Custom Elements Everywhere).


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

Читать дальше →
Всего голосов 48: ↑45 и ↓3+42
Просмотры17K
Комментарии 53

Tic Tac Toe, часть 1: Svelte и Canvas 2D

Занимательные задачкиJavaScriptПрограммированиеРазработка игрSvelteJS
Tutorial
Tic Tac Toe, часть 0: Сравнение Svelte и React
Tic Tac Toe, часть 1: Svelte и Canvas 2D
Tic Tac Toe, часть 2: Undo/Redo с хранением состояний
Tic Tac Toe, часть 3: Undo/Redo с хранением команд
Tic Tac Toe, часть 4: Взаимодействие с бэкендом на Flask с помощью HTTP

В статье "Сравнение: Svelte и React" я попробовал повторить разработку игры Tic Tac Toe. Там я выполнил только первую часть исходного туториала для React'а без поддержки истории ходов. В этой статье мы начнем разработку этой игры с применением фреймворка Svelte с поддержкой истории ходов. История ходов на самом деле представляет собой систему Undo/Redo. В исходном туториале на React'e реализована система Undo/Redo с хранением состояний с произвольным доступом к любому состоянию. При реализации системы Undo/Redo обычно используется паттерн Command, и в списке команд хранятся команды Undo/Redo. Такой подход мы попробуем реализовать позже, сейчас выполним систему Undo/Redo с хранением состояний.


В разработке применено архитектурное решение Flux с использованием хранилища. Об этом отдельный раздел в статье.

Читать дальше →
Всего голосов 10: ↑8 и ↓2+6
Просмотры4K
Комментарии 5

Tic Tac Toe, часть 2: Undo/Redo с хранением состояний

Занимательные задачкиJavaScriptПрограммированиеЛогические игрыSvelteJS
Tutorial
Tic Tac Toe, часть 0: Сравнение Svelte и React
Tic Tac Toe, часть 1: Svelte и Canvas 2D
Tic Tac Toe, часть 2: Undo/Redo с хранением состояний
Tic Tac Toe, часть 3: Undo/Redo с хранением команд
Tic Tac Toe, часть 4: Взаимодействие с бэкендом на Flask с помощью HTTP

Продолжение статьи Tic Tac Toe, часть 1, в которой мы начали разработку этой игры на Svelte. В этой части мы доделаем игру до конца. Добавим команды Undo/Redo, произвольный доступ к любому шагу игры, попеременные ходы с противником, вывод статуса игры, определение победителя.

Читать дальше →
Всего голосов 12: ↑8 и ↓4+4
Просмотры2K
Комментарии 0