среда, 9 марта 2016 г.

Современные тренды web-разработки на 2021

Гайды

Настраиваем удобный npm проект для себя и команды или немного о современных фронтенд инструментах


Чеклист фронтенд-разработчика
https://habrahabr.ru/company/netologyru/blog/347740/

Как мы запустили offline-версию сайта RG.RU
https://habrahabr.ru/company/oleg-bunin/blog/348150/

Фронтенд — это не больно!. Пособие для разработчиков и сочувствующих

8 вещей, которые должен изучить разработчик фронтенда

О повышающейся сложности фронтенда

Еще одна причина использовать 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/

Статья Как выбрать фреймворк для 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?
Стек технологий 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/

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.

Безопасность

Опасный 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/

от TCP к QUIC
https://habr.com/en/company/oleg-bunin/blog/461829/

Протокол 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/

установка 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

README.md

Это отправная точка при погружении в проект, она встречает вас базовой информацией:
  • Установка — тут описаны все шаги, как запустить проект, чтобы даже «дизайнер» мог это сделать; 
  • Запуск — примеры базовых команд для запуска проекта; 
  • Опции запуска — список всех возможных параметров и их описание; 
  • «Первые шаги» — собственно, это и есть нужный раздел:
    • быстрый поиск UI-блока — описание инструмента для препарирования приложения; 
    • «Что? Где? Когда?» — краткое описание структуры проекта; 
    • создание UI-блока — минимальная информация, как создать UI-блок; 
    • «Логика приложения, или где искать обработку событий?»; 
    • Примеры/скринкасты — экспериментальный раздел с примерами.

Инструменты, обеспечивающие качество кода

http://newwebstandarts.blogspot.ru/2016/03/javascript-style-guide.html

Работа с пакетами, сборка и компиляция. Devops

What frameworks do you use?

1. React
2. Angular
3. Vue.js

Оптимальная комбинация ReactJs + redux + ImmutableJS + библиотеки (V)
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)
-------------------------
Можно создать шаблонный проект (например там ASP.NET MVC+Webpack+React+Redux) сохраняешь его в Yeoman (локально) и потом можно использовать для "быстрого старта". У Yo есть публичный репозиторий, можно использовать шаблоны оттуда (в основном там Node.js, но есть и ASP.NET CORE)
-------------------------
Полезные ссылки
http://yeoman.io/learning/index.html
Заключение: 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 и запускать их без установки. 
Изучаем Progressive Web App. Подборка ресурсов
https://github.com/ragingwind/learning-pwa

Progressive Web App Checklisthttps://web.dev/pwa-checklist/

      
Руководство для начинающих по прогрессивным веб-приложениям и фронтенду 
https://habr.com/en/company/mailru/blog/334536/

Дерзкие планы Microsoft по поводу PWA в Windows 10




• 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/ - Прогрессивные веб-приложения. Руководство к действию

Интересные проекты

Fetch
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

МОДУЛИ

Модульная система [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 гораздо быстрее и требует меньше системных ресурсов, в то время как автоматизация браузера без пользовательского интерфейса сложнее и требует более серьёзной предварительной подготовки.

▍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 без пользовательского интерфейса.
В отличие от cheeriopuppeteer — это обёртка для автоматизации 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




Комментариев нет:

Отправить комментарий

mlops

  . Почти вся информация по вопросу собрана в гитхабе  awesome-mlops , который курирует Лариса Висенгериева, главный эксперт сайта ml-ops.or...