"Prom.ua shopping cart workflow as a microfrontend", Danylo KazymyrovFwdays
For a long time, the Prom.ua shopping cart was part of a monolith. After migration to SSR there was a need to reuse it and make it a separate application.
In my talk, I will tell about the approach to building interaction between frontend applications and show how we applied it to Prom.ua shopping cart.
Денис Измайлов, JavaScript сегодня: React, Redux и новая реальностьScrumTrek
2016 год. Добро пожаловать в новую реальность.
Сегодня позиция JavaScript-разработчика является одной из самых востребованных и хорошо оплачиваемых в мире. Современные возможности JavaScript - это квестистенция всего, что произошло в отрасли разработки за всё её время существования: универсальные React-компоненты и композиция, декларативная анимация, изоморфные приложения, отсутствие side effects, авто-генерация тестов, симбиоз ООП и функционального программирования.
Последние три года выдались самые насыщенные революционные для веб-разработки. Многие разработчики, кто не успел уследить за произошедшим, задают лишь один вопрос ЧТО ПРОИСХОДИТ?
В рамках этого доклада мы попробуем синхронизироваться с JavaScript сообществом и посмотреть, что же он предоставляет нам сегодня? Как решать задачи привычные задачи? Что является актуальным направлением, а что может стать пустой тратой сил и времени?
Сергей Морковкин "Разработка realtime SPA с использованием VueJS и RethinkDB"Fwdays
В процессе доклада мы рассмотрим преимущества использования связки VueJS + RethinkDB для создания realtime SPA приложений, построим базовый проект, рассмотрим ключевые особенности VueJS, а также установим socket- соединение с авторизацией.
"Prom.ua shopping cart workflow as a microfrontend", Danylo KazymyrovFwdays
For a long time, the Prom.ua shopping cart was part of a monolith. After migration to SSR there was a need to reuse it and make it a separate application.
In my talk, I will tell about the approach to building interaction between frontend applications and show how we applied it to Prom.ua shopping cart.
Денис Измайлов, JavaScript сегодня: React, Redux и новая реальностьScrumTrek
2016 год. Добро пожаловать в новую реальность.
Сегодня позиция JavaScript-разработчика является одной из самых востребованных и хорошо оплачиваемых в мире. Современные возможности JavaScript - это квестистенция всего, что произошло в отрасли разработки за всё её время существования: универсальные React-компоненты и композиция, декларативная анимация, изоморфные приложения, отсутствие side effects, авто-генерация тестов, симбиоз ООП и функционального программирования.
Последние три года выдались самые насыщенные революционные для веб-разработки. Многие разработчики, кто не успел уследить за произошедшим, задают лишь один вопрос ЧТО ПРОИСХОДИТ?
В рамках этого доклада мы попробуем синхронизироваться с JavaScript сообществом и посмотреть, что же он предоставляет нам сегодня? Как решать задачи привычные задачи? Что является актуальным направлением, а что может стать пустой тратой сил и времени?
Сергей Морковкин "Разработка realtime SPA с использованием VueJS и RethinkDB"Fwdays
В процессе доклада мы рассмотрим преимущества использования связки VueJS + RethinkDB для создания realtime SPA приложений, построим базовый проект, рассмотрим ключевые особенности VueJS, а также установим socket- соединение с авторизацией.
При создании интерактивного мобильного или веб-приложений нужна серверная часть, которую будет использовать приложение и разработчик этого приложения. Он должен знать маршруты, по которым можно найти методы, их описание, входные параметры и варианты ответов.
В идеале хочется, чтобы из API можно было мгновенно сгенерировать клиентский код. А ещё реализация метода всегда может измениться, и нужно предусмотреть версионность, чтобы старые клиенты могли продолжать работать без ошибок.
Можно подумать, что реализация этого может занять месяцы, но я покажу, как реализовать это на ASP.NET Core за 20 минут.
vSphereTools - инструмент для автоматизации работы с vSphere | Тимур ГильмуллинPositive Hack Days
1. VIX API против pysphere.
2. vSphereTools - это набор скриптов от DevOps для поддержки работы с vSphere и виртуальными машинами.
3. Описание инструмента, его достоинства и недостатки, возможные доработки.
Евгений Остапчук "Tips&Tricks for ASP.NET MVC performance"Fwdays
On this talk, we will share unusual back streets of ASP.NET MVC for increase performance:
- brief review of usual improvements
- fast and strong typed url generation
- increase Razor performance
Пакетный менеджер CrossPM: упрощаем сложные зависимости | Александр КовалевPositive Hack Days
1. Сложности при распутывании перекрёстных и вложенных зависимостей.
2. Пакетный менеджер CrossPM. Его возможности и примеры использования.
3. Интеграция CrossPM и системы хранения пакетов Artifactory.
В докладе будет:
- что такое F.I.R.S.T
- организация кода приложения для повышения его тестируемости, поддерживаемости и производительности
- какой тест-фреймворк выбрать для решения какой задачи?
- какие виды тестирования бывают и за какие из них отвечают разработчики?
- как тратить больше времени на код, а не на тесты
- как и какие метрики тестирования собирать
Система мониторинга Zabbix в процессах разработки и тестирования | Алексей БуровPositive Hack Days
1. Система мониторинга ресурсов различных отделов
2. Шаблоны и роли серверов, разграничение доступа и зон ответственности
3. ptzabbixtools - конфигурация мониторинга на целевых серверах
4. Пример встраивания системы мониторинга в процессы разработки/тестирования
Многие аналитики предрекают реактивному программированию большое будущее в решении задач Mobile и Big Data.
TypeSafe, разработчики языка Scala, создали многообещающий реактивный фреймворк Akka, который "дружит" с Java.
Чем он может быть интересен Java-разработчикам? Сможет ли Akka+Java конкурировать с Akka+Scala? И как ей в этом помогут новые фичи Java 8?
Об этом я расскажу в своем докладе "Посмотрим на Акку-Джаву".
"Web Vitals monitoring & optimizations", Erik HimiranovFwdays
Performance is one of the key factors in determining a product's user experience. It is very important that the site loads quickly, is responsive and interactive, and the content remains stable.
I want to share why you need to monitor application performance, talk about Web Vitals metrics and tools for measuring them.
I also want to tell you about examples of optimizations that can positively affect performance and what results it can bring.
Последние несколько лет в продуктовой разработке проблемы масштабирования решаются через переход на микросервисную архитектуру. На эту тему было сказано много про подходы, плюсы и минусы, но мало кто рассматривал эту проблематику со стороны фронтенда.
В ЦИАН мы идем по пути перехода от монолита к микросервисам, в том числе и на фронтенде. Задачи и проблемы, с которыми мы сталкиваемся, очень близки к аналогичным на бэкенде, но в то же время совершенно другие.
В своем докладе я расскажу про архитектуру фронтенда (и так называемого миддленда) в ЦИАН: какие задачи перед нами стояли, что мы решили, где мы находимся сейчас и с какими проблемами мы столкнулись.
Инструментарий для создания дистрибутивов продуктов | Владимир СелинPositive Hack Days
1. Что такое дистрибутив большого продукта?
2. Проблема: знаниями о процессе установки продукта владеет малое число людей.
3. Шаблоны + DSL - решение всех проблем!
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"Fwdays
В докладе расскажу о шишках, набитых в процессе настройки SEO для конкретного проекта. Речь пойдет о настройке SEO для своего одностраничного приложения как с привлечением сторонних сервисов, так и самостоятельно, используя PhantomJS или рендеринг на стороне сервера. Также, поделюсь особенностями размещения share-кнопок от различных провайдеров.
"Electron. How the most modern framework works" Oleksii HolubievFwdays
Have you ever wondered why all the top companies are developing their desktop versions of applications? Spotify, Teams, Skype, WhatsApp, VS Code, etc. All these modern programs use one framework and that is Electron. But why? What's in it that WPF or JavaFX doesn't have? A small spoiler - JavaScript. But this is not the only thing.
So in this speech we:
1. Let's remember the history of origin and understand who really maintains this product
2. Let's look under the hood and see how it really works
3. Let's talk about why VS Code has so many processes
4. Let's deal with the main killer features
5. Let's evaluate the framework cons
6. Let's meet the community
This topic is suitable for everyone who is already familiar with JS and is interested in desktop applications.
This document discusses the architecture of a chat application built with React and Redux. It describes the main components used, including Sidebar, Conversation, and User components. It explains how state is handled through Redux, with actions dispatched from events like new messages and loading messages from the server. Selectors are used to retrieve relevant state for components. The data flow involves a socket server and client to handle real-time updates from the server.
This document provides an overview of Flux, an architectural pattern for building user interfaces. It discusses the key concepts of unidirectional data flow, stores that maintain application state, views that render data and respond to user input, and actions that represent state changes. Actions are sent to a dispatcher which manages dependencies between stores. The pattern aims for conceptual integrity, reliability, and moving fast with stable infrastructure. Examples of Flux implementations are provided, along with resources for learning more.
При создании интерактивного мобильного или веб-приложений нужна серверная часть, которую будет использовать приложение и разработчик этого приложения. Он должен знать маршруты, по которым можно найти методы, их описание, входные параметры и варианты ответов.
В идеале хочется, чтобы из API можно было мгновенно сгенерировать клиентский код. А ещё реализация метода всегда может измениться, и нужно предусмотреть версионность, чтобы старые клиенты могли продолжать работать без ошибок.
Можно подумать, что реализация этого может занять месяцы, но я покажу, как реализовать это на ASP.NET Core за 20 минут.
vSphereTools - инструмент для автоматизации работы с vSphere | Тимур ГильмуллинPositive Hack Days
1. VIX API против pysphere.
2. vSphereTools - это набор скриптов от DevOps для поддержки работы с vSphere и виртуальными машинами.
3. Описание инструмента, его достоинства и недостатки, возможные доработки.
Евгений Остапчук "Tips&Tricks for ASP.NET MVC performance"Fwdays
On this talk, we will share unusual back streets of ASP.NET MVC for increase performance:
- brief review of usual improvements
- fast and strong typed url generation
- increase Razor performance
Пакетный менеджер CrossPM: упрощаем сложные зависимости | Александр КовалевPositive Hack Days
1. Сложности при распутывании перекрёстных и вложенных зависимостей.
2. Пакетный менеджер CrossPM. Его возможности и примеры использования.
3. Интеграция CrossPM и системы хранения пакетов Artifactory.
В докладе будет:
- что такое F.I.R.S.T
- организация кода приложения для повышения его тестируемости, поддерживаемости и производительности
- какой тест-фреймворк выбрать для решения какой задачи?
- какие виды тестирования бывают и за какие из них отвечают разработчики?
- как тратить больше времени на код, а не на тесты
- как и какие метрики тестирования собирать
Система мониторинга Zabbix в процессах разработки и тестирования | Алексей БуровPositive Hack Days
1. Система мониторинга ресурсов различных отделов
2. Шаблоны и роли серверов, разграничение доступа и зон ответственности
3. ptzabbixtools - конфигурация мониторинга на целевых серверах
4. Пример встраивания системы мониторинга в процессы разработки/тестирования
Многие аналитики предрекают реактивному программированию большое будущее в решении задач Mobile и Big Data.
TypeSafe, разработчики языка Scala, создали многообещающий реактивный фреймворк Akka, который "дружит" с Java.
Чем он может быть интересен Java-разработчикам? Сможет ли Akka+Java конкурировать с Akka+Scala? И как ей в этом помогут новые фичи Java 8?
Об этом я расскажу в своем докладе "Посмотрим на Акку-Джаву".
"Web Vitals monitoring & optimizations", Erik HimiranovFwdays
Performance is one of the key factors in determining a product's user experience. It is very important that the site loads quickly, is responsive and interactive, and the content remains stable.
I want to share why you need to monitor application performance, talk about Web Vitals metrics and tools for measuring them.
I also want to tell you about examples of optimizations that can positively affect performance and what results it can bring.
Последние несколько лет в продуктовой разработке проблемы масштабирования решаются через переход на микросервисную архитектуру. На эту тему было сказано много про подходы, плюсы и минусы, но мало кто рассматривал эту проблематику со стороны фронтенда.
В ЦИАН мы идем по пути перехода от монолита к микросервисам, в том числе и на фронтенде. Задачи и проблемы, с которыми мы сталкиваемся, очень близки к аналогичным на бэкенде, но в то же время совершенно другие.
В своем докладе я расскажу про архитектуру фронтенда (и так называемого миддленда) в ЦИАН: какие задачи перед нами стояли, что мы решили, где мы находимся сейчас и с какими проблемами мы столкнулись.
Инструментарий для создания дистрибутивов продуктов | Владимир СелинPositive Hack Days
1. Что такое дистрибутив большого продукта?
2. Проблема: знаниями о процессе установки продукта владеет малое число людей.
3. Шаблоны + DSL - решение всех проблем!
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"Fwdays
В докладе расскажу о шишках, набитых в процессе настройки SEO для конкретного проекта. Речь пойдет о настройке SEO для своего одностраничного приложения как с привлечением сторонних сервисов, так и самостоятельно, используя PhantomJS или рендеринг на стороне сервера. Также, поделюсь особенностями размещения share-кнопок от различных провайдеров.
"Electron. How the most modern framework works" Oleksii HolubievFwdays
Have you ever wondered why all the top companies are developing their desktop versions of applications? Spotify, Teams, Skype, WhatsApp, VS Code, etc. All these modern programs use one framework and that is Electron. But why? What's in it that WPF or JavaFX doesn't have? A small spoiler - JavaScript. But this is not the only thing.
So in this speech we:
1. Let's remember the history of origin and understand who really maintains this product
2. Let's look under the hood and see how it really works
3. Let's talk about why VS Code has so many processes
4. Let's deal with the main killer features
5. Let's evaluate the framework cons
6. Let's meet the community
This topic is suitable for everyone who is already familiar with JS and is interested in desktop applications.
This document discusses the architecture of a chat application built with React and Redux. It describes the main components used, including Sidebar, Conversation, and User components. It explains how state is handled through Redux, with actions dispatched from events like new messages and loading messages from the server. Selectors are used to retrieve relevant state for components. The data flow involves a socket server and client to handle real-time updates from the server.
This document provides an overview of Flux, an architectural pattern for building user interfaces. It discusses the key concepts of unidirectional data flow, stores that maintain application state, views that render data and respond to user input, and actions that represent state changes. Actions are sent to a dispatcher which manages dependencies between stores. The pattern aims for conceptual integrity, reliability, and moving fast with stable infrastructure. Examples of Flux implementations are provided, along with resources for learning more.
The document discusses the Model-View-Controller (MVC) pattern and Flux architecture. MVC faces problems as applications grow in size and complexity, with multiple controllers and views potentially manipulating the same model. Flux aims to address this by having a unidirectional data flow where all actions are dispatched through a central dispatcher. While simpler initially, Flux applications can also become confusing as data flows grow more complex. The key difference is that Flux maintains a higher level of predictability through its single-directional data flow approach.
Amazing threesome, rrr... React. Redux. Real world / Ростислав Галкин (Babo)Ontico
"Все гениальное просто" — таким бы мог быть слоган Redux, одной из имплементаций FLUX-архитектуры, которой 31 мая исполняется ровно год. И вот уже практически год, как мы приняли решение использовать Redux в наших проектах. Это был осознанный риск, о котором мы ничуть не пожалели.
За этот год мы научились писать тестируемый код, избегать мутаций и применять методы оптимизации для выбранного стека. Также нам пришлось написать собственные решения для инкапсуляции состояния при написании переиспользуемых компонент и для работы с формами произвольной глубины вложенности, а также мы написали свою сетку для отображения бесконечного числа элементов.
Кроме этого, на больших нагрузках мы столкнулись с проблемами производительности рендеринга на сервере в изоморфном приложении и с успехом их решили.
Обо всем этом я расскажу в своем докладе, поделюсь тем опытом и ощущениями, которые мне лично удалось получить за время работы с React и Redux.
Flux is an architecture for building JavaScript applications that promotes unidirectional data flow. The key elements of Flux are the Dispatcher, Stores, and Views. The Dispatcher centralizes the flow of data and dispatches actions to the Stores. Stores contain application state and logic. Views are React components that subscribe to Stores and listen for changes to re-render. Actions define activities and are dispatched by action creators through the Dispatcher to the Stores to update state.
Reveal.js is an HTML presentation framework that allows users to create beautiful presentations using HTML. It has features like vertical slides, nested slides, Markdown support, different transition styles, themes, slide backgrounds, images, video, tables, quotes, and linking between slides. Presentations can be exported to PDF and custom states and events can be triggered on each slide. The framework is touch optimized and works on devices like mobile phones and tablets.
WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости соврем...WebCamp
WebCamp2016, 29 июля, Одесса
Роман Якобчук (Senior Software Engineer, RevJet)
Relay, GraphQL и остальные радости современного React
После бури различных библиотек, направлений и обновлений в мире React, которая обрушилась на нас в прошлом году, мы почувствовали некоторое затишье. Действительно за последние полгода мы уже успели немного заскучать, это прекрасный момент выдохнуть и разобраться с технологиями которые выпустил Facebook для фетчинга данных в React (GraphQL, Relay), и тем, на что это вдохновило комьюнити.
Website: http://webcamp.in.ua/devops.html#theme
Facebook: https://www.facebook.com/WebCamp/
VK: https://vk.com/webcamp
Twitter: https://twitter.com/WebCampOdessa
Youtube: http://bit.ly/2bsQ0LO
Боишься складывать состояние приложения в один объект? Пугаешься слова "миддлвейр"? Не знаешь, куда класть вызовы API?
Ты не один. Расскажу, как работать с самой хипстерской Flux-библиотекой с примерами — и без риторических вопросов.
Даниил Соколюк "ReactJS.NET — опыт рендеринга на сервере"MskDotNet Community
Поговорим что такое React и зачем он нужен разработчикам, разберемся что такое ReactJS.NET и JavaScriptServices,
Обсудим как интегрировать React компоненты в существующую Razor разметку или даже в WebForms. Расскажем о том какие проблемы с производительностью существуют при серверном рендеринге компонентов и как их решать.
Большинство современных SPA написанны в связке react+redux, но и такое решение может начать тормозить, если его не оптимизировать. В своём докладе Валентин Череватый рассказывает правила оптимизации для написания производительных react+redux приложений.
The last couple of years the technology of containerization via Docker has gained incredible popularity. Many teams already successfully use infrastructure services, staging, testbed in containers, but many people are afraid of using containers to deploy applications in production. The community still lacks success-stories, especially for applications without microservice architecture. The huge number of approaches and recipes does not as well add confidence in what you are doing.
This report is about our fears, successes and solutions for the dockerization of the classical monolith in production..
React новая эра фронтенд разработки / Роберт Харитонов (Liberty Global)Ontico
React(JS) — это современная библиотека для разработки UI компонентов от Facebook, по праву считающаяся самой трендовой технологией среди JavaScript разработчиков на 2015/16 год.
Но каким образом React стал настолько популярен в среде разработчиков, учитывая что библиотека покрывает только View из необходимого минимума MVC архитектуры? Ответ таится в экосистеме технологий, в рамках которой нам открываются совершенно новые способы разработки приложений, не только для веба, но и нативных платформ с родным UI (iOS, Android, Win 10, OSx).
Роберт расскажет, почему огромная популярность React более чем заслужена, и почему это не "очередной фреймворк", а чуть ли не самое большое изменение в JavaScript разработке за последние годы.
Микросервисная архитектура на базе CoreOS и KubernetesDenis Izmaylov
13 июля 2016 состоялся восьмой Node.js Meetup в Москве. В этом докладе мы рассмотрели Scale Cube, Docker, CoreOS и кратко Kubernetes и Concourse CI.
В следующем докладе взглянем более подробно на Kubernetes и Concourse CI, посмотрим как с помощью этих быстрых и прекрасных инструментов построить Deployment Automation.
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...OdessaFrontend
Группа волонтеров по всему миру работает над React и React Native приложениями для ADHD America. В своей работе они используют Recoil — довольно новую библиотеку для работы с состоянием в Реакт приложениях. Сергей Журавель рассказывает почему они решили попробовать Recoil и показывает как использоватьт Recoil в React и React Native приложениях.
Высокопроизводительные приложения на базе Windows Azure. Пример реального про...UNETA
Презентация к докладу: «Высокопроизводительные приложения на базе Windows Azure. Пример реального проекта». Докладчик: Александр Фещенко – MVP (SQL Azure), .Net Team Lead в DCT.
В докладе будут рассмотрены методики поиска узких мест в веб-приложениях, их устранения, а также способы повышения производительности при помощи облачной инфраструктуры Windows Azure.
Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)Ontico
РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 6 июня, 14:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2471.html
Знаете ли вы, что такое прогрессивный рендеринг?
Почему вам стоит его использовать?
Какие есть варианты сегодня?
Oleg Chorny discusses Google's approach to release engineering, which aims to reduce manual toil through automation. Some key aspects include establishing frequent release cycles to catch bugs early, empowering individual teams through self-service tools and best practices, integrating automated testing, packaging, deployment and configuration management into the release process, and defining clear policies for approving and controlling releases. The overall goal is to make software releases as simple as pressing a button by establishing the right automated systems and collaboration between developers and release engineers.
The document discusses Angular 1.x components, bindings, transclusion, routing, and TypeScript. It covers lifecycle hooks, binding rules, using immutable.js for objects and arrays, custom elements, different routing options like ngRoute, ui-router, and angular@router/angular1. It also discusses using TypeScript for optional types and documentation, declaration files, and alternatives to Webpack like Rollup.js and Closure Compiler.
This document discusses the React application lifecycle and component lifecycle methods. It explains the different phases a React component goes through:
1. Mounting/Birth which includes initialization, getting default props/state, componentWillMount, render(), and componentDidMount.
2. Updating/Growth which involves receiving new props, re-rendering if needed, componentWillUpdate, render(), componentDidUpdate.
3. Unmounting/Death includes cleanup with componentWillUnmount before the component is removed from the DOM.
It provides code examples for using state, props, lifecycle methods, and testing React components with Jest and snapshots.
26. Жизнь - нет, а разработка - да
• состояние не зависит от компонента и один
action может менять много состояний
• легче найти состояние и отделить action
• легче debugging
• состояние (и его историю) легко сохранить
(например в базу или localstorage)
• server rendering