frontend

Подборка инструментов Web-разработчика

4 июля, 2014
7 минут(ы) чтения

Если контент не отображается, включите VPN.

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

Template Engines

Если HTML код вам кажется излишним, настало время переходить на шаблонизаторы.

Handlebars

Pug (бывший Jade)

Haml

JSX

Version Control System

Управление версиями — лучший способ не потерять свои правки 

GitHub
Git — система контроля версий разработанная Линусом Торвальдсом специально для ОС Linux. Github — это самый крупный хостинг для открытых приложений, к тому же являющийся по совместительству социальной сетью для программистов. Он бесплатен для открытых проектов и имеет удобный GUI для Windows.

Stash
Коммерческий инструмент от Atlassian. Выходит дешевле для разработки проектов большой командой.

Bitbucket
Прямой конкурент GitHub’у. Конкурентными преимуществами является возможность использовать Mercurial или Git, и иметь 5 закрытых репозиториев в бесплатном тарифе.
Идеально подходит для закрытых проектов маленькой команды. SourceTree — возможно, лучший git gui, сделан как раз для него.

Gitlab
Можно ставить на свои серверы, имеет крепкое комьюнити и ничем не уступает по функциональности гитхабу. К тому же открыт.

Continuous Integration

Непрерывная интеграция — автоматизирует сборку, тестирование и разворачивание проекта.

Circle CI

Travis CI

Github Actions

GitLab Actions

Bamboo

Integrated development environment (IDE)

Brackets
OpenSource IDE основанная на Node.js. Разработчики от Adobe четко придерживаются методологии гибкой разработки, делая билды каждые две недели, радуя новыми плюшками и функционалом. Из плюсов — замечательная система плагинов, автообновление без перезагрузки страницы изменившегося HTML и тесная интеграция с Google Chrome. Из неприятных минусов — кривые кириллические шрифты и все ещё недостаточная мощность по сравнению, например с WebStorm или Visual Studio. Зато есть мощные плагины, которые существенно расширяющие функционал, в том числе для серверных приложений.

Cloud 9
Онлайновая ИСР базирующаяся на собственно разработанном текстовом редакторе Ace. Имеет легкую интеграцию с Github, Bitbucket, умеет разворачиваться в облаке Heroku и Azure. Вау-фича в возможности совместного редактирования проекта. Cloud 9 имеет открытый исходный код и любой желающий может бесплатно развернуть сервак с ней или подписаться на коммерческие услуги используя серваки самой конторы. С неких пор называется как AWS Cloud 9.

Codio
Браузер-ориентированная ИСР для фронт-энд разработки.

WebStorm
Настроенный IntelliJ IDEA на работу с OpenWeb Platform. Множество плагинов расширяющих и без того мощные возможности по-редактированию JavaScript / Haxe / HTML / Node.js.

Visual Studio Code

Sublime Text

Client-Side

Angular
Взгляд Google на Front-End разработку для создания больших одностраничных приложений.

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

Ember
Сложный, мощный и интересный комбайн, работающий в себе связку из jQuery и handlebars.

Vue
Самый хипстерский JS-фреймворк современности.

Svelte
Svelte — это радикально новый подход к созданию пользовательских интерфейсов. В то время как традиционные фреймворки, такие как React и Vue, выполняют большую часть своей работы в браузере, Svelte переносит эту работу на этап компиляции, который происходит при создании приложения.

Client Side Library

Knockout
Маленькая и быстрая библиотека для кроссбраузерных data-bind’ов.

Polymer
Всё необходимое для построения next-gen web-application для evergreen браузеров.

jQuery
Библиотека с самым большим числом верного коммьюнити. Причины по которой её стоит использовать банальны: кроссбраузерность, модульность, связка с другими плагинами использующие jQuery (например, jQuery UI), удобные полифилы для новых EcmaScript 5 нововведений.

React

Server-Side

Node
Серверный JavaScript для построения мощных асинхронных веб-приложений. Разработан на V8-движке с возможностью подключения C++ модулей.

Rhino
Интеграция кода ECMAScript в Java-приложения. Разработка от Mozilla.

Deno

Full-Stack Framework

Meteor
Ответ Rails от мира JavaScript. Meteor.js создан специально для Real-Time приложений. Всё работает из коробки, в том числе разработка под мобильные платформы.

Derby
Менее монолитен чем Meteor, имеет поддержку NPM и множество разнообразных БД.

Back-End Javascript

Sails
Гибкий фреймворк для создания полноценных RESTfull приложений.

Koa
Следующее поколение фреймворков под Node от авторов знаменитого Express. Проповедует ES7 стиль написания кода и работает только на новых Node.js.

Hapi
Позволяет сфокусироваться на коде без лишних заморочек.

StrongLoop

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

Isomorphic App

Next

Nuxt
Фрейморк с открытым исходным кодом, делающий серверную разработку с Vue.js простой и легкой.

Gatsby

JavaScript Modules

ESM

RequireJS
Отложенная загрузка модулей по принципу AMD.

browserify
Browserify использует загрузку модулей NPM и некоторые библиотеки от Node.

Scaffolding

Yeoman
Инструмент для построения структуры (леса) проекта. Используя генераторы можно с легкостью собирать огромные приложения.

JavaScript Dependency Management

Bower
Сборщик клиентских пакетов от Twitter. Стал стандартом в клиентской веб-разработке.

NPM
Node Package Module. Менеджер пакетов созданный специально для Node, но каким-то образом ставший популярным и в среде Front-end

Yarn
Взгляд Facebook на пакетный менеджер для Node.

PNPM

JavaScript Task Runners

Grunt
Один из первых сборщиков проектов построенный для JavaScript. Обладает обширным количеством плагинов на все случаи жизни.

Gulp
Быстрый сборщик. Количество плагинов молниеносно увеличивается с каждым днём благодаря легкому API.

JavaScript Builders

Webpack
All-in-one решение для создания бандлов.

Rollup
Легкий сборщик JS-модулей. Удаляет лишние куски неиспользуемого кода, тем самым сокращая бандлы.

Parcel

Vite

JavaScript Alternatives

CoffeeScript
Разработанный как «сахар» над JavaScript, по сути является новым языком, цель которого – облегчить клиентскую разработку, убрать рутину и добавить простоты и скорости в процесс написания кода. Компилируется в JavaScript. Возможна отладка в браузере посредством Source Map.

TypeScript
OpenSource язык программирования, представленный Microsoft в 2012 году и позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript типизацией и прочими ES Next фишками. Также компилируется в JavaScript с которым обратно совместим.

Dart
Google Dart позиционируется в качестве замены/альтернативы JavaScript, страдающего от «фундаментальных» изъянов, которые невозможно исправить путём эволюционного развития. Компилируется в JavaScript, но может быть запущен в специальном браузере Dartium (клон Chromium, с добавленной виртуальной машиной для Dart).

Elm
Чистый функциональный взгляд для построения Web сайтов.

WASM

CSS Preprocessing

Stylus
На данный момент самый мощный препроцессор. Его уникальной возможностью является переопределение встроенных свойств.

Less
Менее мощный, но и самый легкий в изучении препроцессор.

SCSS
Мощный инструмент расширяющий CSS. Доступны переменные, миксины, наследование и многое другое.

Mobile Development

PhoneGap
Создание мобильный приложений в привычной HTML5 среде.

Cordova

AppFramework
Разработанный в Intel фреймворк для кросс-платформенной разработки.

Titanium Appcelerator 
Создание полностью нативных приложений на JavaScript.

React Native
Создание нативных оболочек на React.js.

NativeScript

Mobile Frameworks

jQuery Mobile

TopCoat

Sencha Touch

Kendo UI

Ionic

framework7

Virtual Reality

A-Frame

Play Canvas

React 360

Desktop App

Electron

NW.js

CSS Frameworks

Bootstrap
Самый популярный мобильный фрейморк созданный Twitter и имеющий огромное коммьюнити.

Foundation
Адаптивный фреймворк созданный специально для мобильной разработки.

Pure CSS
Мощный гибкий фреймворк от Yahoo использующий normalize.css

Skeleton

tailwind

UIKit
Легкий и модульный интерфейсный фреймворк для разработки быстрых и мощных веб-интерфейсов.

SemanticUI

Material Design Lite
Material Design Lite позволяет добавить внешний вид и стиль Material Design на ваши веб-сайты. Он не зависит от каких-либо фреймворков JavaScript и нацелен на оптимизацию для использования на разных устройствах, изящную деградацию в старых браузерах и предлагает сразу доступный опыт.

Data Protocol

REST

GraphQL

JSON RPC

World Wide Web Languages

HTML

RDFa

Ontology

JSON-LD

Microdata

Test Unit

QUnit

Jasmine

mocha

Chai

Karma

Jest

Code linters

JSHint
Бесплатный, с открытым исходным кодом, инструмент для проверки кода от Дугласа Крокфорда.

JSLint
Менее требовательный и более гибкий JavaScript-валидатор.

ESLint
Созданный специально для гибкой расширяемости, стал стандартом для разработки TS/ES6 проектов.

Code analysis

ScanJS
Статический анализатор от Mozilla.

Flow
Статический валидатор от Facebook написанный на OCaml.

CodeQL

Test Driver Unit

Watir

Browser Automation

Selenium

Puppeteer

Behavior-driven Development

EnvJS
Управление браузером через JavaScript.

zombie
Full-Stack тестирование на Node.js.

vows
Асинхронный BDD и continuous integration для Node.js.

testSwarm
Распределенное тестирование.

CoverJS
Покрытие кода – это мера оценки тестирования. CoverJS оценивает покрытие кода тестами инструментацией инструкций (а не через строки кода, как JSCoverage) и генерацией инструментальной версии кода.

JavaScript Performance Testing

JSPerf
Удобный playground для проверки производительности выполнения той или иной функции.

Dromaeo

WEB Performance Testing

Testmysite
Инструмент показывающий итоговую оценку скорости сайта.

PageSpeed Insights

WebPageTest
Мощный инструмент показывающий расширенную статистику по оценке производительности сайта.

Canvas2D Frameworks

kineticJS
Один из первых Canvas фреймворков в том числе поддерживающий Node.js

paper.js
Быстрая, ориентированная на векторную графику canvas-библиотека.

fabric
SVG-to-canvas графическая библиотека.

PIXI
2М-библиотека работающая на WebGL и даунгрейдом до Canvas2D в случае недоступности первой. Эта библиотека используется внутри мощного игрового фреймворка Phaser.

Построение графиков

d3.js

Chart.js

highlight.js

WebGL Frameworks

Three.js

BabylonJS

GEO Library

Leaflet

Argis

Продвинутое управление событиями

RxJS

Redux

JS Game Engines

Goo Create
Полноценная ИСР на WebGL. Чертовски крутая.

CraftyJS
Движок для создания 2М-игр используя DOM/Canvas для отображения.

Cocos2d
Кросс-компилятор основанный на Cocos2d-X для создания двумерных игровых приложений.

PlayCanvas
Самый прогрессирующий WebGL движок.

Blend4Web
Интегрированный движок в Blender. Имеет легкий экспорт и редактор скриптов.

PaaS

App Engine
Взгляд Google веб-разработки на языках PHP, Java, Python, Go, Node.

Heroku
Базируется на Amazon Services. Огромная коллекция плагинов.

Windows Azure
Облако от Microsoft с тесной интеграцией с Visual Studio.

AppHarbor
Разворачивание ASP.NET сайтов в облаке.

Cocaine
Повторение идей heroku от Яндекса.

BaaS

Parse
Простой и удобный в обращении бэкэнд для реализации NoSQL баз данных для мобильных платформ.

Firebase
Мощный бэкэнд для создания инновационных реал-тайм приложений.

Code obfuscation

Jjencode

jsunpack.jeek.org
Сервис для удобного просмотра минимизированного JS кода.

Icons

iconsearch.ru

findicons.com

iconfinder.com

daturi.me

subtlepatterns.com

testico.net

simpreal.org.ua

Material Icons

Sandbox

cssdesk.com
Песочница созданная для CSS редактирования.

fiddlesalad.com
HTML/CSS/JS песочница с открытым исходным кодом.

codepen.io
Песочница и социальная сеть для верстальщиков. Есть платные тарифы расширяющие функциональность.

ssbin.com
Популярная за рубежом песочница для хранения HTML снипетов.

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

shadertoy.com
Коллекция WebGL шейдеров.

glslsandbox.com
Песочница с разнообразными WebGL примерами.

Browser Hacks

browserhacks.com
Здесь описаны все необходимые хаки, чтобы запустить сайт на устаревших браузерах.

Regular Expression

regexone.com
Один из самых популярных ресурсов для проверки регулярных выражений.

refiddle.com
Эксперименты с регулярками на JavaScript, Ruby, .NET.

rexv.org
Поддерживает PHP, Perl, Python, Node.js.

Documentations

developer.mozilla.org
Самая полная документация JavaScript от Mozilla.

devdocs.io
Открытая свободная документация по многим популярным языкам.

StackOverflow

gotoandlearn.com
Коллекция обучающих примеров.

stylestats.org
Оценочная утилита для написания лучшего CSS.

Typography

Типографика существует, чтобы отдавать должное содержанию.

Основы стиля в типографике

typecast.com
Коммерческий типограф имеющий бесплатный ограниченный план.

Типограф от Тёмы

Типограф Муравьёва

typograf.ru
Универсальное средство подготовки текстов к web-изданию.

CDN

Google

Yandex

CloudFlare

Browser Tests

html5test.com
Возможности вашего локального браузера и таблица известных браузеров.

status.modern.ie
Текущее развитие Internet Explorer.

kangax.github.io/compat-table
Тестовая проверка на новейшие стандарты EcmaScript.

js web frameworks benchmark

User Interface prototyping

Высокий процент результатов в любой крупной системе зависит от низкого процента переменных.

Универсальные принципы дизайна

ninjamock

hex color tool

bada55.io

Zeplin

Web Flow

JotForm

css button generator

css3 maker

noise texture generator

Verification and HTML Validator

Инструмент веб-мастеров от Google

Официальный валидатор от W3C

HTML5 валидатор

Проверка JSON на валидность

jsonlint.com

kangax.github.io/domlint
Проверка DOM на соответствие разметке.

caniuse.com
Сервис проверки доступности фичей в разных браузерах.

JavaScript Minification

Google Closure

UglifyJS

Самый популярный плагин для обфускации кода.

js Crambler
Коммерческий сервис защиты вашего кода.

Colors

Говорить о цвете без формы это дилетантство.

coolors.co

paletton.com

colourlovers.com

checkmycolours.com
Проверка сайта на читаемость текста.

mudcu.be/sphere
Научный подход к выбору цвета.

0to255.com

HEX Color Tool

HTML5 Starter Kit

Web Starter Kit
Шаблон для создания мобильных HTML5 приложений от Google.

html5boilerplate.com
Пуленепробиваемый шаблон для создания мобильных и настольных страниц.

Initializr

Fonts

Font Squirrel
Огромная библиотека шрифтов на все случаи жизни.

Google Fonts
Открытая библиотека шрифтов от Google.


UPD. 10.03.2016
Удалил устаревшие сервисы.

UPD. 02.04.2017
Добавил инструменты для работы с UX.

UPD. 07.09.2022
Добавил обновленные сервисы.

Денис Сергеевич Басковский

Философ, изобретатель и поэт.

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
timers
Предыдущая статья

Как очистить все таймеры и интервалы на JS

file
Следующая статья

Как получить расширение файла с помощью JS