Гайды
Настраиваем удобный npm проект для себя и команды или немного о современных фронтенд инструментах
Чеклист фронтенд-разработчика
https://habrahabr.ru/company/netologyru/blog/347740/
Как мы запустили offline-версию сайта RG.RU
https://habrahabr.ru/company/oleg-bunin/blog/348150/
Фронтенд — это не больно!. Пособие для разработчиков и сочувствующих
8 вещей, которые должен изучить разработчик фронтенда
О повышающейся сложности фронтенда
Руководство по API для кодеров
На замену TCP и TLS Обсуждение протокола QUIC
TLS основан на SSL 3
TLS (включая 1.3) в технических подробностях
Yeoman - может сгенерировать код за тебя, и ты можешь заюзать его для создания нескольких приложений сразу (III)
Можно создать шаблонный проект (например там ASP.NET
MVC+Webpack+React+Redux) сохраняешь его в Yeoman (локально) и потом
можно использовать для "быстрого старта". У Yo есть публичный
репозиторий, можно использовать шаблоны оттуда (в основном там Node.js,
но есть и ASP.NET CORE)
Полезные ссылки
http://yeoman.io/learning/index.html
Лучшая из существующих реализаций Datetime на JS. Понимает любые форматы, включая поддержку русского языка
https://github.com/ragingwind/learning-pwa
Progressive Web App Checklisthttps://web.dev/pwa-checklist/
• Build 2018: Microsoft анонсировала ряд новых возможностей для PWA-приложений
https://microsoftportal.net/windows-9/9605-build-2018-microsoft-anonsirovala-ryad-novyh-vozmozhnostey-dlya-pwa-prilozheniy.html
PWA — это просто
https://learn.javascript.ru/modules
Эволюция модульного JavaScript
https://habrahabr.ru/company/yandex/blog/192874/
Еще одна причина использовать noopener — глубокое погружение в распределение процесса рендеринга
frontend-case-studieshttps://github.com/andrew--r/frontend-case-studies
— курируемый список с техническими докладами и статьями об корпоративной фронтенд разработке в реальном мире
— курируемый список с техническими докладами и статьями об корпоративной фронтенд разработке в реальном мире
Верхнеуровневая архитектура фронтенда. Лекция Яндекса
Siteaudit: проведите аудит вашего сайта (Pagespeed, Lighthouse, A11y) прямо из терминала
Источники информации
I.
Web Developer Roadmap — 2017https://github.com/kamranahmedse/developer-roadmap
перевод
Как стать веб-разработчиком в 2017 году — план действийhttps://habr.com/en/company/netologyru/blog/328426/
Web Developer Roadmap — 2017https://github.com/kamranahmedse/developer-roadmap
перевод
Как стать веб-разработчиком в 2017 году — план действийhttps://habr.com/en/company/netologyru/blog/328426/
Статья Как выбрать фреймворк для frontend-разработки
Оригинал
https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b#.1gmuglfia
Восходящие звезды 2017-го в JavaScript. Полный обзор ландшафта 2017: тренды фреймворков фронтенда и ноды, инструментария, IDE, мобильных, тестирования и т.п.
https://risingstars.js.org/2017/en/
What’s the difference between JavaScript and ECMAScript?
Восходящие звезды 2017-го в JavaScript. Полный обзор ландшафта 2017: тренды фреймворков фронтенда и ноды, инструментария, IDE, мобильных, тестирования и т.п.
https://risingstars.js.org/2017/en/
What’s the difference between JavaScript and ECMAScript?
Стек технологий JavaScript с нуля (перевод материалов «JavaScript Stack from Scratch»)https://github.com/UsulPro/js-stack-from-scratch
https://www.thoughtworks.com/radar/languages-and-frameworks
Базовая настройка окружения для разработки JavaScripthttps://italonascimento.github.io/configuring-a-basic-environment-for-javascript-development/
Настройка минимального, полезного окружения для JavaScript разработки (Setting up a Minimal, Yet Useful JavaScriptDev Environment)
Что поправить в верстке перед выпуском в продакшн?https://habrahabr.ru/post/319664/
https://www.thoughtworks.com/radar/languages-and-frameworks
Базовая настройка окружения для разработки JavaScripthttps://italonascimento.github.io/configuring-a-basic-environment-for-javascript-development/
Настройка минимального, полезного окружения для JavaScript разработки (Setting up a Minimal, Yet Useful JavaScriptDev Environment)
Security tools
https://snyk.io/ is a commercial tool for discovering, fixing, and preventing known vulnerabilities in JavaScript, Java, and Ruby applications. The service has its own database of vulnerabilities and takes the data from the NSP and the NIST NVD. It allows developers to cure the security risks using patches and upgrades offered by the company.
https://nodesecurity.io/ offers useful tools for scanning dependencies and detecting vulnerabilities. NSP uses its own database, built from npm modules scans, as well as data from public bases like NIST National Vulnerability Database (NVD). On the top of that, NSP provides integration with GitHub Pull Request and CI software, real-time checks, alerts, and recommendations on how to handle vulnerabilities within your Node.js apps.
http://retirejs.github.io/retire.js/ is an open-source dependency checker. It includes various components, like a command-line scanner, Grunt plugin, Firefox and Chrome extensions, Burp and OWASP ZAP plugins. Retirejs collects the vulnerability information from the NIST NVD and other sources, like bug-tracking systems, blogs, and mailing lists.
https://gemnasium.com/ is a commercial tool with a free trial option. It supports various technologies and packagers, including Ruby, PHP, Bower (JavaScript), Python, and npm (JavaScript). Gemnasium security tool comes with helpful features, like auto-update, real-time alerts, security notifications, and Slack integration.
https://ossindex.net/ supports various ecosystems (Java, JavaScript, and .NET/C#) and multiple platforms, like NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal, and MSI. It gathers the information about vulnerabilities from National Vulnerability Database, various security feeds, and contributions, made by the community.
Добавляйте в ссылки
rel="noopener"
rel="nofollow noopener"
rel="noreferrer" - для FireFox
https://nodesecurity.io/ offers useful tools for scanning dependencies and detecting vulnerabilities. NSP uses its own database, built from npm modules scans, as well as data from public bases like NIST National Vulnerability Database (NVD). On the top of that, NSP provides integration with GitHub Pull Request and CI software, real-time checks, alerts, and recommendations on how to handle vulnerabilities within your Node.js apps.
http://retirejs.github.io/retire.js/ is an open-source dependency checker. It includes various components, like a command-line scanner, Grunt plugin, Firefox and Chrome extensions, Burp and OWASP ZAP plugins. Retirejs collects the vulnerability information from the NIST NVD and other sources, like bug-tracking systems, blogs, and mailing lists.
https://gemnasium.com/ is a commercial tool with a free trial option. It supports various technologies and packagers, including Ruby, PHP, Bower (JavaScript), Python, and npm (JavaScript). Gemnasium security tool comes with helpful features, like auto-update, real-time alerts, security notifications, and Slack integration.
https://ossindex.net/ supports various ecosystems (Java, JavaScript, and .NET/C#) and multiple platforms, like NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal, and MSI. It gathers the information about vulnerabilities from National Vulnerability Database, various security feeds, and contributions, made by the community.
Безопасность
Опасный target="_blank"https://habr.com/en/post/282880/Добавляйте в ссылки
rel="noopener"
rel="nofollow noopener"
rel="noreferrer" - для FireFox
HTTP-3
HTTP-3 разрушение основ и дивный новый мир!!
https://habr.com/en/company/dododev/blog/473930/
HTTP-2 на базе SDPY-3
При использовании HTTP/2 все эти запросы будут выполняться в рамках одного TCP-соединения, а значит, если один из сегментов любого запроса потеряется или придёт неверно, передача всех запросов и ответов остановится, пока не будет восстановлен потерявшийся сегмент. Очевидно, что чем хуже качество соединения, тем медленнее работает HTTP/2
Если между браузером и сервером есть облако то там свой NGINX с reverse proxy
облако конвертирует HTTP-2 в HTTP 1-1
Разьяснение HTTP2
https://habr.com/en/post/221427/
QUIC на базе qQUIC на базе UDP
QUIC работает в User space а не Kernel Space
как следствие потребляет больше ресурсов (примерно в 3 раза)
На замену TCP и TLS Обсуждение протокола QUIC
обсуждалось что делаем DTLS (TLS поверх UDP) и QUIC поверх DTLS
QUIC хуже TCP если сеть не гарантирует доставку пакетов (мобильная сеть)
https://habr.com/en/company/vasexperts/blog/509630/
https://habr.com/en/company/vasexperts/blog/509630/
от TCP к QUIC
https://habr.com/en/company/oleg-bunin/blog/461829/
Протокол QUIC в деле: как его внедрял Uber, чтобы оптимизировать производительность
https://habr.com/en/company/Voximplant/blog/463073/
Протокол QUIC в деле: как его внедрял Uber, чтобы оптимизировать производительность
https://habr.com/en/company/Voximplant/blog/463073/
https://habr.com/en/company/vdsina/blog/501840/
TLS основан на SSL 3
TLS (включая 1.3) в технических подробностях
https://tls.dxdt.ru/tls.html
доступно про TLS
https://habr.com/en/company/plesk/blog/507094/
отличие TLS 1.3 от TLS 1.2
https://habr.com/en/company/it-grad/blog/352668/
https://habr.com/en/company/it-grad/blog/352668/
установка TLS 1.3
https://github.com/facebookincubator/fizz
What is the Difference Between HTTP and HTTPS
https://www.keycdn.com/blog/difference-between-http-and-https/ JavaScript
Инфографика: весь javascript в одной картинке
https://fossbytes.com/wp-content/uploads/2015/09/infographic-the-entire-javascript-language-in-one-single-image-491250-2.jpg
https://fossbytes.com/wp-content/uploads/2015/09/infographic-the-entire-javascript-language-in-one-single-image-491250-2.jpg
README.md
Это отправная точка при погружении в проект, она встречает вас базовой информацией:- Установка — тут описаны все шаги, как запустить проект, чтобы даже «дизайнер» мог это сделать;
- Запуск — примеры базовых команд для запуска проекта;
- Опции запуска — список всех возможных параметров и их описание;
- «Первые шаги» — собственно, это и есть нужный раздел:
- быстрый поиск UI-блока — описание инструмента для препарирования приложения;
- «Что? Где? Когда?» — краткое описание структуры проекта;
- создание UI-блока — минимальная информация, как создать UI-блок;
- «Логика приложения, или где искать обработку событий?»;
- Примеры/скринкасты — экспериментальный раздел с примерами.
Инструменты, обеспечивающие качество кода
http://newwebstandarts.blogspot.ru/2016/03/javascript-style-guide.html
Recompose
Работа с пакетами, сборка и компиляция. Devops
What frameworks do you use?
1. React
2. Angular
3. Vue.js
2. Angular
3. Vue.js
ReactJs + Redux + ES6 + webpack + npm + jss + autoprefixer + eslint + Elemental UI + karma (V)\
Recompose
A React utility belt for function components and higher-order components.
react-loadable
A higher order component for loading components with promises.
React Navigation
Learn once, navigate anywhere
React Router
Declarative routing for React
Автогенерация кода
1. Yeoman - 405 (II)
Yeoman - может сгенерировать код за тебя, и ты можешь заюзать его для создания нескольких приложений сразу (III)
-------------------------
-------------------------
http://yeoman.io/learning/index.html
Как использование Yeoman изменило наш подход к работе-------------------------
Заключение: Yeoman - стандартная рекомендация.
Работа с датами - momentjs
http://momentjs.com/docs/Лучшая из существующих реализаций Datetime на JS. Понимает любые форматы, включая поддержку русского языка
Прогрессивные веб-приложения
- Метод постепенного улучшения: приложение использует как можно больше окружений. Если необходим какой-либо сервис, приложение применяет то, что есть в наличии, или корректно прекращает работу, если ничего не найдено
- Адаптивный пользовательский интерфейс: приложение подстраивается под различные способы ввода (касание, речь и т. д.) и вывода данных (разные размеры экрана, вибрация, аудио, брайлевские дисплеи).
- Оффлайн-поддержка
- UI, подогнанный под приложение: приложение перенимает UI-элементы нативных платформ, в том числе и быструю загрузку пользовательского интерфейса, который может быть заархивирован путем кэширования ассетов с помощью Service Worker.
- Постоянные обновления: Service Worker API определяет процесс для автоматического обновления приложений.
- Защищенное соединение: используется защищенный протокол передачи данных HTTPS для предотвращения слежки и атак.
- Обнаружение приложения: метаданные, такие как https://www.w3.org/TR/appmanifest/, позволяют поисковым системам находить веб-приложения.
- Взаимодействие push-уведомлений: они помогают пользователям быть в курсе событий.
- Нативная установка: на некоторые платформы можно установить веб-приложение, ничем не отличающееся от нативного (иконка на главном экране, отдельная позиция на панели многозадачности, UI браузера опционален).
- Залинкованность: возможность с легкостью расшаривать приложения по URL и запускать их без установки.
https://github.com/ragingwind/learning-pwa
Progressive Web App Checklisthttps://web.dev/pwa-checklist/
Руководство для начинающих по прогрессивным веб-приложениям и фронтенду
• Build 2018: Microsoft анонсировала ряд новых возможностей для PWA-приложений
https://microsoftportal.net/windows-9/9605-build-2018-microsoft-anonsirovala-ryad-novyh-vozmozhnostey-dlya-pwa-prilozheniy.html
PWA — это просто
https://habr.com/post/418923/
https://habr.com/en/company/piter/blog/494334/ - Прогрессивные веб-приложения. Руководство к действию
Meteor
RxJs
Observables для JavaScript
https://github.com/Reactive-Extensions/RxJS
Библиотека для работы с асинхронными потоками данных. Наблюдатель, поставщик-потребитель и все такое
Polymer (html 5 components) - 309 (I) / 50 (II)
https://medium.com/polymer-in-production/why-polymer-%D0%B2%D0%B5%D0%B1-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B-%D0%B2-%D0%BF%D1%80%D0%BE%D0%B4%D0%B0%D0%BA%D1%88%D0%BD%D0%B5-%D1%87%D0%B0%D1%81%D1%82%D1%8C-1-1f0bf99a32ce#.i7iupzdh2
Шпаргалка по Polymer
https://habr.com/en/company/piter/blog/494334/ - Прогрессивные веб-приложения. Руководство к действию
Интересные проекты
FetchMeteor
RxJs
Observables для JavaScript
https://github.com/Reactive-Extensions/RxJS
Библиотека для работы с асинхронными потоками данных. Наблюдатель, поставщик-потребитель и все такое
Polymer (html 5 components) - 309 (I) / 50 (II)
https://medium.com/polymer-in-production/why-polymer-%D0%B2%D0%B5%D0%B1-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B-%D0%B2-%D0%BF%D1%80%D0%BE%D0%B4%D0%B0%D0%BA%D1%88%D0%BD%D0%B5-%D1%87%D0%B0%D1%81%D1%82%D1%8C-1-1f0bf99a32ce#.i7iupzdh2
Шпаргалка по Polymer
МОДУЛИ
Модульная система [RU] – основы использования нативных модулейhttps://learn.javascript.ru/modules
Эволюция модульного JavaScript
https://habrahabr.ru/company/yandex/blog/192874/
Модульная структура проекта
Многие фреймворки ее предоставляют. Но в крайних случая можно пользоваться и
https://www.chris-granger.com/2013/01/24/the-ide-as-data/,
https://github.com/evancz/elm-architecture-tutorial/,
https://github.com/Day8/re-frame
и
https://cycle.js.org/.
Существует множество отличных утилит для веб-скрапинга, некоторые из которых, вроде https://github.com/cheeriojs/cheerio, работают на уровне исходного HTML-кода, а некоторые, такие как https://github.com/GoogleChrome/puppeteer, позволяют обрабатывать страницы средствами полноценного браузера. Что именно выбрать — зависит от целей конкретного проекта, так как работа с HTML гораздо быстрее и требует меньше системных ресурсов, в то время как автоматизация браузера без пользовательского интерфейса сложнее и требует более серьёзной предварительной подготовки.
https://github.com/cheeriojs/cheerio — это быстрая, гибкая и миниатюрная реализация основных возможностей jQuery, созданная специально для сервера и предназначенная для работы с HTML.
https://github.com/GoogleChrome/puppeteer — это Node-API для управления браузером Chrome без пользовательского интерфейса.
В отличие от
Headless Chrome Node API
Puppeteer is one of the great stories of the year. Made by the Google Chrome team, it's a headless Chrome browser, that is to say a browser that runs in the background and that can be piloted by code.
It can be used to do things like:
Automatically testing web application UIs in real browsers.
Taking snapshots of web pages to do server-side rendering.
Generating PDF files using Google Chrome ability to save pages as PDF files.
Create React App
Create React apps with no build configuration.
Axios
Promise based HTTP client for the browser and node.js
The https://github.com/axios/axios library is the most used HTTP client.
It can work on both the client side (AJAX requests from the client) or on the server-side (HTTP requests in a Node.js environment)
Its success may be related to Vue.js too, because a lot of Vue.js tutorials use it to query a distant API through HTTP.
D3
Bring data to life with SVG, Canvas and HTML.
Animate.css
A cross-browser library of CSS animations. As easy to use as an easy thing.
Compilers
TypeScript
Babel
Flow
Reason
Purescript
ClojureScript
Elm
Compiler for Elm, a functional language for reliable webapps.
NODE.JS
Express
Fast, unopinionated, minimalist web framework for node.
Koa
Expressive middleware for node.js using ES2017 async functions
https://koajs.com/ Expressive middleware for node.js using generators https://koajs.com/ philosophy is close to https://expressjs.com/ but it's built using ES6 generators to avoid a problem sometimes called https://www.sitepoint.com/saved-from-callback-hell/
Fastify
Fast and low overhead web framework, for Node.js
micro
Asynchronous HTTP microservices
Keystone
node.js cms and web app framework
Nest
A progressive Node.js framework for building efficient and scalable server-side applications on top
Feathers
A REST and realtime API layer for modern applications.
Feathers A REST and realtime API layer for modern applications. Feathers is a very flexible solution to create a "service oriented" architecture, it's a good fit to create node.js microservices
Server.js
Simple and powerful server for Node.js
Loopback
LoopBack makes it easy to build modern applications that require complex integrations.
Loopback LoopBack is an open source Node.js framework built on top of Express optimized for building APIs for mobile, web, and other devices. Connect to multiple data sources, write business logic in Node.js, glue on top of your existing services and data, connect using JS, iOS & Android SDKs. Loopback is another mature framework with a lot of built-in features, including authentication with token and connectors to any kind of database. The killer feature is the API explorer that lets developers check all API end-points in an intuitive way, with the ability to check any user's token. It's definitively a good choice if you have to build an API.
Hapi (худшие результаты по по производительности уходит на спад)
Hapi Server Framework for Node.js Restify node.js REST framework specifically meant for web service APIs Trails Modern Web Application Framework for Node.js.
CSS IN JS
Styled Components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without
In 2017, Styled Components added 8.7k stars, making it the #1 most popular CSS-in-JS library on GitHub – Tweet
CSS Modules
Documentation about css-modules
Polished
A lightweight toolset for writing styles in JavaScript ✨
Glamorous
Maintainable CSS with React
Emotion
The Next Generation of CSS-in-JS
Styled JSX
Full CSS support for JSX without compromises
Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum
Glamor
inline css for react et al
JSS
JSS is an authoring tool for CSS which uses JavaScript as a host language.
Radium
Radium
A toolchain for React component styling.
https://www.chris-granger.com/2013/01/24/the-ide-as-data/,
https://github.com/evancz/elm-architecture-tutorial/,
https://github.com/Day8/re-frame
и
https://cycle.js.org/.
Веб-скрапинг
Существует множество отличных утилит для веб-скрапинга, некоторые из которых, вроде https://github.com/cheeriojs/cheerio, работают на уровне исходного HTML-кода, а некоторые, такие как https://github.com/GoogleChrome/puppeteer, позволяют обрабатывать страницы средствами полноценного браузера. Что именно выбрать — зависит от целей конкретного проекта, так как работа с HTML гораздо быстрее и требует меньше системных ресурсов, в то время как автоматизация браузера без пользовательского интерфейса сложнее и требует более серьёзной предварительной подготовки.
▍Cheerio
https://github.com/cheeriojs/cheerio — это быстрая, гибкая и миниатюрная реализация основных возможностей jQuery, созданная специально для сервера и предназначенная для работы с HTML.
Cheerio
— это отличный инструмент для быстрого чернового веб-скрапинга, подходящий для разбора HTML-кода страниц. Это средство отличается удобным синтаксисом, похожим на jQuery и предназначено для обхода HTML-документов и выполнения манипуляций с ними. Cheerio
хорошо сочетается с библиотекой https://github.com/request/request-promise-native, предназначенной для загрузки удалённых HTML-документов.▍Puppeteer
https://github.com/GoogleChrome/puppeteer — это Node-API для управления браузером Chrome без пользовательского интерфейса.
В отличие от
cheerio
, puppeteer
— это обёртка для автоматизации Chrome без пользовательского интерфейса, которая весьма полезна для работы с современными веб-приложениями, в том числе — одностраничными, основанными на JavaScript. Так как работа ведётся с браузером Chrome, puppeteer
характеризуется высоким уровнем поддержки современных веб-страндартов. Это влияет на возможность правильного формирования страниц и выполнения скриптов. Браузер Chrome без пользовательского интерфейса — инструмент сравнительно новый, но он, весьма вероятно, постепенно вытеснит более старые средства, такие как https://phantomjs.org/Headless Chrome Node API
Puppeteer is one of the great stories of the year. Made by the Google Chrome team, it's a headless Chrome browser, that is to say a browser that runs in the background and that can be piloted by code.
It can be used to do things like:
Automatically testing web application UIs in real browsers.
Taking snapshots of web pages to do server-side rendering.
Generating PDF files using Google Chrome ability to save pages as PDF files.
Create React App
Create React apps with no build configuration.
Axios
Promise based HTTP client for the browser and node.js
The https://github.com/axios/axios library is the most used HTTP client.
It can work on both the client side (AJAX requests from the client) or on the server-side (HTTP requests in a Node.js environment)
Its success may be related to Vue.js too, because a lot of Vue.js tutorials use it to query a distant API through HTTP.
D3
Bring data to life with SVG, Canvas and HTML.
Animate.css
A cross-browser library of CSS animations. As easy to use as an easy thing.
Compilers
TypeScript
Babel
Flow
Reason
Purescript
ClojureScript
Elm
Compiler for Elm, a functional language for reliable webapps.
NODE.JS
Express
Fast, unopinionated, minimalist web framework for node.
Koa
Expressive middleware for node.js using ES2017 async functions
https://koajs.com/ Expressive middleware for node.js using generators https://koajs.com/ philosophy is close to https://expressjs.com/ but it's built using ES6 generators to avoid a problem sometimes called https://www.sitepoint.com/saved-from-callback-hell/
Fastify
Fast and low overhead web framework, for Node.js
micro
Asynchronous HTTP microservices
Keystone
node.js cms and web app framework
Nest
A progressive Node.js framework for building efficient and scalable server-side applications on top
Feathers
A REST and realtime API layer for modern applications.
Feathers A REST and realtime API layer for modern applications. Feathers is a very flexible solution to create a "service oriented" architecture, it's a good fit to create node.js microservices
Server.js
Simple and powerful server for Node.js
Loopback
LoopBack makes it easy to build modern applications that require complex integrations.
Loopback LoopBack is an open source Node.js framework built on top of Express optimized for building APIs for mobile, web, and other devices. Connect to multiple data sources, write business logic in Node.js, glue on top of your existing services and data, connect using JS, iOS & Android SDKs. Loopback is another mature framework with a lot of built-in features, including authentication with token and connectors to any kind of database. The killer feature is the API explorer that lets developers check all API end-points in an intuitive way, with the ability to check any user's token. It's definitively a good choice if you have to build an API.
Hapi (худшие результаты по по производительности уходит на спад)
Hapi Server Framework for Node.js Restify node.js REST framework specifically meant for web service APIs Trails Modern Web Application Framework for Node.js.
CSS IN JS
Styled Components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without
In 2017, Styled Components added 8.7k stars, making it the #1 most popular CSS-in-JS library on GitHub – Tweet
CSS Modules
Documentation about css-modules
Polished
A lightweight toolset for writing styles in JavaScript ✨
Glamorous
Maintainable CSS with React
Emotion
The Next Generation of CSS-in-JS
Styled JSX
Full CSS support for JSX without compromises
Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum
Glamor
inline css for react et al
JSS
JSS is an authoring tool for CSS which uses JavaScript as a host language.
Radium
Radium
A toolchain for React component styling.
GRAPHQL
React Starter Kit
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, Post
Apollo client
A fully-featured, production ready caching GraphQL client for every UI framework and GraphQ
Relay
Relay is a JavaScript framework for building data-driven React applications.
Apollo Server
GraphQL server for Express, Connect, Hapi, Koa and more
Graphcool
Prisma turns your database into a realtime GraphQL API
Vulcan
A toolkit to quickly build apps with React, GraphQL & Meteor
GraphQL Playground
GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collabor
РАЗНОЕ
json-server
Get a full fake REST API with zero coding in less than 30 seconds (seriously)
Feather
Simply beautiful open source icons
Frappé Charts
Simple, responsive, modern SVG Charts with zero dependencies
socket.io
Realtime application framework (Node.JS server)
SemanticUI
Semantic is a UI component framework based around useful principles from natural language.
Lodash
A modern JavaScript utility library delivering modularity, performance, & extras.
echarts
A powerful, interactive charting and visualization library for browser
React Starter Kit
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, Post
Apollo client
A fully-featured, production ready caching GraphQL client for every UI framework and GraphQ
Relay
Relay is a JavaScript framework for building data-driven React applications.
Apollo Server
GraphQL server for Express, Connect, Hapi, Koa and more
Graphcool
Prisma turns your database into a realtime GraphQL API
Vulcan
A toolkit to quickly build apps with React, GraphQL & Meteor
GraphQL Playground
GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collabor
РАЗНОЕ
json-server
Get a full fake REST API with zero coding in less than 30 seconds (seriously)
Feather
Simply beautiful open source icons
Frappé Charts
Simple, responsive, modern SVG Charts with zero dependencies
socket.io
Realtime application framework (Node.JS server)
SemanticUI
Semantic is a UI component framework based around useful principles from natural language.
Lodash
A modern JavaScript utility library delivering modularity, performance, & extras.
echarts
A powerful, interactive charting and visualization library for browser
Комментариев нет:
Отправить комментарий