JS Fest 2018. Лилия Карпенко. Особенности создания IOS / Android Mobile Apps ...JSFestUA
Во время доклада мы поговорим про особенности создания не совсем стандартного мобильного приложения с помощью Cordova/PhoneGap + React/Redux. Мы пройдемся по основным проблемам с которыми я и команда столкнулась во время разработки приложения, об особенностях окружения и вариантов решений к которым мы пришли. Рассмотрим самые популярные плагины для Cordova которые позволяют вам считывать информацию пользователе, работу с доступами, хранение данных и создание интернет звонков с помощью WebRTC. Будет много интересного и поучительного
JS Fest 2018. Лилия Карпенко. Особенности создания IOS / Android Mobile Apps ...JSFestUA
Во время доклада мы поговорим про особенности создания не совсем стандартного мобильного приложения с помощью Cordova/PhoneGap + React/Redux. Мы пройдемся по основным проблемам с которыми я и команда столкнулась во время разработки приложения, об особенностях окружения и вариантов решений к которым мы пришли. Рассмотрим самые популярные плагины для Cordova которые позволяют вам считывать информацию пользователе, работу с доступами, хранение данных и создание интернет звонков с помощью WebRTC. Будет много интересного и поучительного
Анджей Гужовский "Riot.JS, или как приготовить современные Web Components"Fwdays
Доклад посвящен замечательному JS-фреймворку — Riot.js (11k звезд на GitHub), который реализует идею Web Components в простом и компактном виде, пропагандируя принципы простоты и Native JavaScript.
Riot.js позволяет по-новому взглянуть на JS-фреймворки, которые в наше время стали увесистыми титанами с собственной экосистемой, знание которых совсем не означает владение JavaScript.
Мы поговорим об устройстве фреймворка, его отличиях, о библиотеках, разработанных сообществом, а также об архитектуре Riot.js приложений и лучших практиках.
Надеюсь, для кого-то мой доклад станет глотком свежего воздуха и популяризирует Riot.js фреймворк в украинском JS-комьюнити.
Инструменты для з̶а̶х̶в̶а̶т̶а̶ ̶м̶и̶р̶а̶ отладки в TarantoolTimur Safin
Презентация для выступления на Владивостокском митапе https://moscowdjango.timepad.ru/event/1884275/
"Основной режим разработки приложений в Тарантуле — это написание скриптов и манипуляции данными на Lua (оставим пока за скобками режим SQL). Часто внедрению Тарантула в некую систему становится блокером использование Lua.
В экосистеме Lua мало тулинга, это касается как встроенного интерпретатора, так и JIT-транслятора LuaJIT.
Давайте оглядимся, как обстоят дела с тестированием, профилированием, статическим анализом и дебагом в Lua. И как это все может быть использовано при разработке сервисов, в архитектуре которых есть Tarantool."
Небольшой пример того, насколько тесно рельсы могут быть интегрированы с бизнес-логикой, хранящейся в базе данных. Оказывается, рельсы отлично уживаются с хранимыми процедурами, кто бы мог подумать?
http://devconf.ru/offers/91
.NET Fest 2018. Сергей Калинец. Azure веб разработка здорового человекаNETFest
Microsoft Azure, пожалуй, самый очевидный выбор для .NET разработчиков, когда они (или их клиенты) внезапно решают, что им нужен клауд. Но при этом мы все равно используем подходы и техники из до-облачного мира, иногда и не подозревая о тех сервисах и удобствах, которые нам дает Azure. На этом докладе Сергей покажет, как быстро и эффективно можно разрабатывать современное веб приложение. Мы затронем разные аспекты -- от организации кода до деплоя и мониторинга приложений, работающих в проде. Документация API, поддержка рабочих процессов, инициализация приложений, полезные инструменты и библиотеки -- все это, и не только, ждет вас на нашем докладе.
Guava - open-source библиотека, разработанная в основном инженерами компании Google, в которой есть множество полезных утилит для написания эффективного и красивого кода. В Guava решено множество типичных задач, которые часто возникают при работе с примитивами, строками, коллекциями, параллельными вычислениями, кэшированием данных и многим другим. В докладе поговорим о возможностях, которые предоставляет Guava, рассмотрим примеры использования утилит библиотеки.
The next version of JavaScript, ES6, is starting to arrive. Many of its features are simple enhancements to the language we already have: things like arrow functions, class syntax, and destructuring. But other features will change the way we program JavaScript, fundamentally expanding the capabilities of the language and reshaping our future codebases. In this talk we'll focus on two of these, discovering the the myriad possibilities of generators and the many tricks you can pull of with template strings.
Анджей Гужовский "Riot.JS, или как приготовить современные Web Components"Fwdays
Доклад посвящен замечательному JS-фреймворку — Riot.js (11k звезд на GitHub), который реализует идею Web Components в простом и компактном виде, пропагандируя принципы простоты и Native JavaScript.
Riot.js позволяет по-новому взглянуть на JS-фреймворки, которые в наше время стали увесистыми титанами с собственной экосистемой, знание которых совсем не означает владение JavaScript.
Мы поговорим об устройстве фреймворка, его отличиях, о библиотеках, разработанных сообществом, а также об архитектуре Riot.js приложений и лучших практиках.
Надеюсь, для кого-то мой доклад станет глотком свежего воздуха и популяризирует Riot.js фреймворк в украинском JS-комьюнити.
Инструменты для з̶а̶х̶в̶а̶т̶а̶ ̶м̶и̶р̶а̶ отладки в TarantoolTimur Safin
Презентация для выступления на Владивостокском митапе https://moscowdjango.timepad.ru/event/1884275/
"Основной режим разработки приложений в Тарантуле — это написание скриптов и манипуляции данными на Lua (оставим пока за скобками режим SQL). Часто внедрению Тарантула в некую систему становится блокером использование Lua.
В экосистеме Lua мало тулинга, это касается как встроенного интерпретатора, так и JIT-транслятора LuaJIT.
Давайте оглядимся, как обстоят дела с тестированием, профилированием, статическим анализом и дебагом в Lua. И как это все может быть использовано при разработке сервисов, в архитектуре которых есть Tarantool."
Небольшой пример того, насколько тесно рельсы могут быть интегрированы с бизнес-логикой, хранящейся в базе данных. Оказывается, рельсы отлично уживаются с хранимыми процедурами, кто бы мог подумать?
http://devconf.ru/offers/91
.NET Fest 2018. Сергей Калинец. Azure веб разработка здорового человекаNETFest
Microsoft Azure, пожалуй, самый очевидный выбор для .NET разработчиков, когда они (или их клиенты) внезапно решают, что им нужен клауд. Но при этом мы все равно используем подходы и техники из до-облачного мира, иногда и не подозревая о тех сервисах и удобствах, которые нам дает Azure. На этом докладе Сергей покажет, как быстро и эффективно можно разрабатывать современное веб приложение. Мы затронем разные аспекты -- от организации кода до деплоя и мониторинга приложений, работающих в проде. Документация API, поддержка рабочих процессов, инициализация приложений, полезные инструменты и библиотеки -- все это, и не только, ждет вас на нашем докладе.
Guava - open-source библиотека, разработанная в основном инженерами компании Google, в которой есть множество полезных утилит для написания эффективного и красивого кода. В Guava решено множество типичных задач, которые часто возникают при работе с примитивами, строками, коллекциями, параллельными вычислениями, кэшированием данных и многим другим. В докладе поговорим о возможностях, которые предоставляет Guava, рассмотрим примеры использования утилит библиотеки.
The next version of JavaScript, ES6, is starting to arrive. Many of its features are simple enhancements to the language we already have: things like arrow functions, class syntax, and destructuring. But other features will change the way we program JavaScript, fundamentally expanding the capabilities of the language and reshaping our future codebases. In this talk we'll focus on two of these, discovering the the myriad possibilities of generators and the many tricks you can pull of with template strings.
"Готовим промисы правильно", Андрей Яманов, MoscowJS 24MoscowJS
Промисы прочно вошли в ES-стандарт и жизнь современных JS-разработчиков. Однако многие, используя их чуть ли не каждый день, не до конца понимают, как они устроены. Какие опасности и возможности в себе кроют. Доклад освежит знания о промисах, предостережёт о нюансах реализаций и подскажет парочку трюков.
JavaScript-модули "из прошлого в будущее"oelifantiev
Доклад на первом Ярославском форнтэнд-митапе.
Рассказ об имеющихся методиках описания модулей в JavaScript а также о грядущем стандарте ES6 и, наконец-то, нативной поддержке модулей языком.
Классические архитектуры во фронтенде / Александра Шинкевич (LOVATA)Ontico
Responsive web design, HTML5, CSS3, IDE, API, React, Angular, веб-компоненты, БЭМ... Опытным фронтендерам эти слова давно знакомы. А как насчет таких классических архитектур как MVC, MVP или MVVM? Знаете ли вы, что такое MVP, и почему Angular.js построен на паттерне MVVM, а не MVC, хотя в этом фреймворке активно используется понятие "контроллер"? Чем эти три архитектуры отличаются друг от друга, и зачем, вообще, о них нужно знать фронтендеру?
В своем докладе я хочу рассмотреть эти три понятия как с теоретической (история, концепция, назначение), так и с практической точки зрения. На простых примерах я покажу, как можно организовать ту или иную архитектуру во фронтендовой части веб-приложения, а также рассмотрю некоторые архитектурные паттерны, которые позволяют увеличить читабельность и добавить модульность и переносимость кода.
В последнее время тема пиринговых технологий становится очень популярной. Уже не первый день работают такие проекты как криптовалюта Bitcoin, микроблоги Twister и мессенджер Tox. Теперь дошло дело и до децентрализованного веба.
Доклад посвящен новому open-source проекту — base.network — распределенному независимому пиринговому вебу. Расскажу про общую схему работы сети, немного о работе с криптографией на JavaScript, о создании приложений на JavaScript без использования центральных серверов.
ECMAScript 6: A Better JavaScript for the Ambient Computing EraAllen Wirfs-Brock
We've entered the Ambient Computing Era and JavaScript is its dominant programing language, But a new computing era needs a new and better JavaScript. It's called ECMAScript 6 and it's about to become the new JavaScript standard. Why do we need it? Why did it take so long? What's in it? When can you use it? Answers will be given.
Александр Русаков - TypeScript 2 in actionMoscowJS
В докладе речь пойдет об основных нововведениях TypeScript 2.0 и 2.1 (literal types, discriminated unions, mapped types...) и их использовании в реальных проектах.
Solit 2014, EcmaScript 6 in Action, Трухин Юрий solit
Юрий Трухин, Россия. Эксперт по облачным технологиям хостинговой компании InfoboxCloud. В прошлом – обладатель статуса Microsoft Most Valuable Professional. Гик, стратег, разработчик. Подробнее на trukhin.com
«Обзор InfoboxCloud для разработчиков». Development секция. Высокий уровень подготовки. Для разработчиков.
В этом докладе будет рассказано об устройстве InfoboxCloud из первых рук, о деталях внутренней реализации, о том, какую пользу несет облако для разработчиков и о будущем InfoboxCloud. Будут рассмотрены 2 кита облачных технологий: IaaS и PaaS без vendor-lock. Отличная возможность спросить обо всём, что касается PaaS/IaaS непосредственно архитектора и разработчика этих систем.
«EcmaScript 6 in Action». Development секция. Для разработчиков.
Поговорим о том, как жизнь разработчиков изменится с приходом нового стандарта.
Михаил Давыдов "Масштабируемые JavaScript-приложения"Yandex
2 июля 2011, Я.Субботник в Екатеринбурге
Михаил Давыдов "Масштабируемые JavaScript-приложения"
О докладе:
Проектирование масштабируемых JavaScript-приложений уровня Яндекс.Почты.
Чем отличается сайт от JavaScript приложения? Какие проблемы могут возникнуть при разработке многокомпонентных приложений? Какую архитектуру нужно заложить, чтобы приложение могло легко развиваться?
Есть такая штука как инструментирование кода. Мало кто знает о ней, даже пользуясь результатами ее применения. Между тем, с инструментированием можно делать много всего интересного и, главное, полезного. Например, это может вам помочь лучше понять код или сделать процесс разработки более эффективным. Примеры инструментирования кода и принципы его работы.
6. • TC39 (Ecma Technical Committee 39): комитет по развитию стандарта
ECMA-262.
• ECMAScript: официальное название языка
• JavaScript - это диалект языка ECMAScript
• ECMAScript Harmony: улучшения после ECMAScript 5 (ES6 и ES7)
• ECMAScript.next: кодовое название ECMAScript 6
6
10. Шаблоны строк
"В ES5 n - это перенос строки."
`В ES6 стало возможным
писать так.`
var name = 'John', age = 22;
`${name} is ${age} years old`
Спецификация 12.2.9, 12.3.7
10
11. let + const
function f() {
let x;
{
const x = "sneaky"; // ok, block scoped name
x = "foo"; // error, const
}
let x = "inner"; // error, already declared in block
}
Спецификация 13.2.1
11
12. Сокращённый формат задания объектов
var a = {'obj1': obj1, 'obj2': obj2}
// аналогично
var a = {obj1, obj2}
Спецификация 13.2.1
12
13. Значения по умолчанию для аргументов
функций
function f(x, y=12 ) {
return x + y;
}
f(3) == 15 //true
Спецификация 19.2
13
18. Модули
Импорт
import { square, MY_CONSTANT } from 'lib/calc';
import 'lib/calc' as c;
import { square as squ } from 'lib/calc';
18
19. Модули
Настройка загрузки модулей
• проверка валидности модуля при импорте (к примеру при помощи
JSHint)
• автоматическая трансляция модулей при импорте (они могут
содержать код CoffeeScript или TypeScript);
• использовать существующие модули (AMD, Node.js)
19
21. Arrow-функции
Для быстрого определения анонимных функций
var x = function () {}
• собственный scope
• нет неявного return
let x = () => {}
• "лексический" scope
• есть неявный return, но не всегда
21
26. Тип Symbol
Применяется для идентификаторов свойств объектов.
var sym1 = Symbol();
var sym2 = Symbol("foo");
var sym3 = Symbol("foo");
Symbol("foo") === Symbol("foo"); // false O_o
26
27. Тип Symbol
Пример
var MyClass = (function() {
var key = Symbol("key") ; // module scoped symbol
function MyClass(prvtData) {
this[key] = prvtData;
}
return MyClass;
})();
var c = new MyClass("hello")
c["key"] === undefined
27
28. Тип Symbol
Символы не приватные!
Симовол уникален , но не приватен , т.к он может быть получен в
результате рефлексии через метод
Object.getOwnPropertySymbols
28
30. Map и Set
Упрощают работу со специфичными типами коллекций. Map позволяет
определять коллекции наборов в формате ключ/значение. В качестве
ключа и значения могут выступать любые выражения JavaScript. По
аналогии Set позволяет задать множество любых выражений
JavaScript
30
31. Map
let data = new Map();
data.set('key', 100);
data.set(undefined, 'some text');
data.has('tag'); //false
data.has(undefined); //true
data.delete(undefined);
data.has(undefined); //false
31
32. Set
let data = new Set([1, 3, 5, 3]);
data.add(3);
data.size; // 3
data.add(7);
data.has(3); //true
data.has(9); //false
data.delete(3);
data.has(3); //false
32
33. WeakSet и WeakMap
То же самое, но безопасно , т.е не заботимся об утечках памяти!
Объект удаляется, если на него больше не осталось ссылок, кроме
ссылки из текущей коллекции, что позволяет не беспокоиться об
утечках памяти.
33
34. WeakMap
let activeUsers = [
{name: "Vasia"},
{name: "Petia"},
{name: "Masha"}
];
// вспомогательная информация хранится отдельно
let weakMap = new WeakMap();
weakMap.set(activeUsers[0], 1);
weakMap.set(activeUsers[1], 2);
weakMap.set(activeUsers[2], 3);
weakMap.get(activeUsers[0]); // 1
activeUsers.splice(0, 1); // Вася более не активный пользователь
// weakMap теперь содержит только 2 элемента
activeUsers.splice(0, 1); // Петя более не активный пользователь
// weakMap теперь содержит только 1 элемент
JS Result Edit on
34
35. Cтруктуры данных
Итог
• Map — коллекция записей вида ключ: значение. Допускает любые
ключи.
• Set — коллекция уникальных элементов, также допускает любые
ключи.
• WeakMap и WeakSet — «урезанные» варианты Map/Set. Не
коллекции. Ключи только Object. Если ссылка на объект осталась
только в WeakMap/WeakSet — объект удаляется.
35
39. For-of
А как насчет For-in?
for (var index in myArray) {
console.log(myArray[index]);
}
но так делать не стоит...
• строковая арифметика (index - строка)
• проходит по expando-свойствам и свойствам из цепочки прототипов
• проход в случайном порядке! О_о
39
40. For-of
Нас спасет!
for (var index of myArray) {
console.log(myArray[index]);
}
Выглядит неплохо
• самый лаконичный и наглядный синтаксис
• нет недостатков for-in
• в отличие от forEach(), он работает с break, continue и return
40
41. For-of
Итог
• for-in нужен для перебора свойств объекта.
• for-of нужен для перебора данных, например, значений массива
• for-of также хорошо работает с большинством массивоподобных
объектов, вроде списков NodeList в DOM
• Работает с объектами Map и Set
• Работает со строками, рассматривая строку как набор символов
Unicode
41
44. Генераторы
function* quips(name) {
yield "Hi " + name + "!";
yield "I'm glad that I can participate in 10th meetup in Yaroslavl";
yield "Goodbye!";
}
var meow_iter = quips("Yaroslavl Frontend Meetup");
$("#meow-btn").click(function() {
var result = meow_iter.next();
$("#chat").text(result.value);
if (result.done) {
$("#chat").text("");
$("#chat").text(result.value);
meow_iter = quips("Yaroslavl Frontend Meetup");
}
});
HTML CSS JS Result Edit on
44
45. Итератор:
class RangeIterator {
constructor(start, stop) {
this.value = start;
this.stop = stop;
}
[Symbol.iterator]() { return this; }
next() {
var value = this.value;
if (value < this.stop) { this.value++;
return {done: false, value: value};
} else {
return {done: true, value:
undefined};
}
}
}
function range(start, stop) {
return new RangeIterator(start, stop);
}
JS Result Edit on
Генератор:
function* range(start, stop) {
for (var i = start; i < stop; i++)
yield i;
}
JS Result Edit on
Генераторы. Зачем?
45
47. Генераторы
Где применить возможность генераторов вести себя как итераторы?
• Преобразование любого объекта в итерируемый
• Упрощение функций, создающих массивы
• Результаты необычной длины
• Рефакторинг сложных циклов
• Утилиты для работы с итерируемыми объектами
47
48. Генераторы
Генератор это
• Итератор, а итератор — это новый стандарт для данных и циклов во
всём ES6
• Попытка избежать спагетти кода в асинхронном коде. К примеру
Q.async() - это экспериментальная попытка сделать асинхронный код
похожим на синхронный при помощи генераторов и промисов
48
50. Promise
Предназначен для получения значений в асинхронном режиме.
Позволяет определить значение, которое пока неизвестно, но будут
определено через какое-то время
50
57. Классы
let dog = new Animal();
let cat = new Cat();
console.log(dog.toString()); // sleep
console.log(cat.toString()); // play
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
57
66. Как использовать новые возможности
ES2015 уже сейчас?
• chrome://flags/ -> Включить
• в io.js или Node достаточно включить флаг --harmony
• использовать транспайлеры es6-tools
66
67.
68. Что умеет Babel?
• Поддержка новых фич и синтаксиса ES2015(ES6)
• Поддержка новых фич и синтаксиса ES2016(ES7)
• Транспайлинг некоторых фич напрямую в ES5
• Поддержка некоторых фич через полифилы
• Поддерживается пока не все (в частности Proxy)
68
70. Будущее Javascript
• Транспайлинг - не только как переходный этап
• Как только браузер начнет поддерживать новую фичу, отключаем ее
транспайлинг
70
72. Ссылки
• Официальная спецификация ES 2015
• Exploring ES6: Upgrade to the next version of JavaScript
• es6-features.org
• Цикл статей ES6 In Depth
• Frontender Magazine
72