В последнее время все чаще требуется максимально быстрая разработка прототипов веб-приложений. Интерфейсы усложняются, требуется отображение огромного количества данных. И вот я озадачился созданием легкого и максимально простого html-шаблонизатора. Кому интересно, что получилось на ~50 строках JS-кода — под кат.
Читать полностью »
Рубрика «javascript» - 306
Простой шаблонизатор на чистом JS со связями
2017-01-10 в 11:18, admin, рубрики: ES6, html, javascript, шаблонизаторLebab это как Babel, только наоборот
2017-01-10 в 8:27, admin, рубрики: babel, es2015, ES6, javascript, lebab, node.jsВсе мы любим вкусности, которые получили с ЕS6. Это были крохотные, но удивительные возможности, такие как поддержка классов, стрелочные функции, константы и т.д.
Современные браузеры поддерживают большинство этих синтаксических улучшений, однако для поддержки устаревших браузеров приходится использовать Babel. Хотя бывают ситуации, когда можно не волноваться о поддержке старых браузеров и начать жить.Читать полностью »
JavaScript-тренды, на которые стоит обратить внимание в 2017-м
2017-01-09 в 11:26, admin, рубрики: javascript, библиотеки, Блог компании RUVDS.com, разработка
Я решил написать этот материал после того, как увидел твит Дэна Абрамова, за который хочу сказать ему огромное спасибо. Дэн задал своим подписчикам вопрос о самых интересных событиях в мире JavaScript, которые достойны внимания широкой общественности.
Любители JS на вопрос откликнулись, под твитом собралась целая гора ответов. Каждый говорил о том, на что, по его мнению, стоит обратить внимание в 2017-м году. В результате получилась весьма занимательная подборка, из которой я выбрал всё лучшее и добавил пояснения.
Читать полностью »
Webpack в Visual Studio для больших солюшенов
2017-01-09 в 10:51, admin, рубрики: javascript, TypeScript, Visual Studio, webpack, Блог компании Mindbox
У нас в солюшене 51 проект. В 10 из них используется TypeScript. Объем минимизированного JavaScript-кода ~1 MB. TypeScript-код одних проектов зависит от кода других проектов. Для многих React-компонентов используются глобальные переменные.
Все вместе это приводит к долгим часам отладки front-end кода. Чтобы упростить себе жизнь, мы внедрили Webpack. А по пути отловили грабли.
TL;DR
- Устанавливаем node 7 + npm
- Выполняем в консоли
npm i -g webpack typescript - Устанавливаем Webpack Task Runner
- Добавляем webpack.config.js
в папку "основного" проекта - Добавляем webpack.config.part.js
в папку каждого зависимого проекта
Классы на JS с protected, множественным наследованием, геттерами-сеттерами и примесями
2017-01-09 в 0:12, admin, рубрики: javascript, node.js, ооп, ооп js, ООП головного мозга, Разработка веб-сайтов
Привет!
Начну с того, что мне надоела убогость классов и наследования в JavaScript! Просидев тысячи часов над крупным JS-проектом, это стало для меня просто очевидным. Особенно когда переключаешься с бэкенда с использованием Yii2, на фронтенд. Ведь в Yii2 и php есть настоящие классы, настоящие protected/private поля, есть trait, всякие dependency injection и behavior. И вот сразу после всех этих штук, создаёшь такой файл NewClass.js для того чтобы написать какой-нибудь класс, и понимаешь, что в JavaScript ничего этого нет. И даже более того, классы можно писать сотнями разных способов — прототипное/функциональное наследование, ES6 классы, и разные сахара с использованием внешних библиотек. Тут я сказал себе — "хватит это терпеть!".
Мыслим в стиле React
2017-01-08 в 21:46, admin, рубрики: documentation, javascript, react.js, ReactJS, tutorial, перевод с английского, Разработка веб-сайтов
Перевод туториала официальной документации библиотеки React.js.
Мыслим в стиле React
React, на наш взгляд, это лучший способ построить большое, быстрое веб-приложение с помощью JavaScript. По нашему опыту в Facebook и Instagram, приложение на React также очень хорошо масштабируется.
Одно из многих замечательных свойств React — это принцип "Как вы проектируете приложение, также вы и создаете его". В этом туториале вы пройдете весь мыслительный процесс проектирования и создания приложения React, отображающего таблицу данных для поиска товара.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №244 (2 — 8 января 2017)
2017-01-08 в 21:12, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, Блог компании Zfort Group, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Еще один велосипед для борьбы с callback hell в JavaScript
2017-01-08 в 5:20, admin, рубрики: javascript, node.js
Считается, что мир JavaScript бурно развивается: регулярно выходят новые стандарты языка, появляются новые синтаксические фишки, а разработчики моментально все это адаптируют и переписывают свои фреймворки, библиотеки и прочие проекты с тем, чтобы все это использовалось. Сейчас, например, если вы всё ещё пишете в коде var, а не const или let, то это уже вроде как моветон. А уж если функция описана не через стрелочный синтаксис, то вообще позор…
Однако, все эти const-ы, let-ы, class-ы и большинство других нововведений не более чем косметика, которая хоть и делает код красивее, но действительно острых проблем не решает.
Читать полностью »
Особенности разработки Telegram бота с Google API в Docker
2017-01-07 в 20:59, admin, рубрики: bot, docker, docker-compose, Google API, javascript, node.js, nodejs, telegram, YARN, youtube apiКоротко о боте: получает список YouTube-каналов пользователя и уведомляет о новых видео с возможностью напомнить о нем позже.
В статье расскажу об особенностях написания этого бота и взаимодействия с Google API. Я люблю краткость, поэтому в статье будет мало «воды».
На какие вопросы ответит статья:
- Где взять внешний адрес сайта для Webhook
- Где взять HTTPS-сертификат как его использовать, чтобы Telegram ему доверял
- Как передавать данные и обрабатывать нажатия на Inline-кнопки
- Как получить вечный OAuth токен для Google API
- Как передать данные пользователя через OAuth callback url
- Как получить бесплатный домен 3 уровня
Стэк:
- Back-end: Node.js + Express.js
- БД: Mongo.js + mongoose
- Пакетный менеджер: Yarn (он действительно быстрый)
- Telegram-бот фреймворк: Telegraf
- Продакшн: Docker + Docker Compose + Vscale.io
FuseTools — уникальный инструмент прототипирования и разработки
2017-01-06 в 23:30, admin, рубрики: android, design, iOS, javascript, UX, разработка мобильных приложенийИ снова доброго времени суток, читатели. Меня зовут Владимир Миленко, и как вы возможно знаете, я фронтенд-разработчик в компании Иннософт. Возможно вы так-же заметите, что в свободное время я изучаю ситуацию на рынке разработки мобильных приложений. Несколько дней назад я написал статью, в которой описал, что такое NativeScript. Пришло время познакомить вас с другим уникальным инструментом, аналогов которому нет.
Речь пойдет о FuseTools — фреймворк для написания нативных мобильных приложений с потрясающими возможностями.
Читать полностью »