JS Lab2017, 25 марта, Одесса Сергей Селецкий (Senior Frontend Engineer at Lohika) System.js и jspm. Что они могут дать для вашего проекта. Преимущества и недостатки. Как это работает с ES6. Примеры сборки проекта. Все материалы: http://jslab.in.ua/ Организаторы: http://geekslab.org.ua/

1. JSPM
ИЛИ КАК ОБОЙТИСЬ
БЕЗ WEBPACK’А
СЕРГЕЙ СЕЛЕЦКИЙ
@SSELETSKYY

2. ПРОВЕРКА МИКРОФОНА

3. О ЧЕМ МЫ ПОГОВОРИМ
• Кто я. Где я. И почему.
• Что такое SystemJS и jspm
• Как сконфигурировать проект
• Пишем только на ES6
• Модульная сборка против bundle-sfx

4. Кто я
Frontend (React) developer - сейчас
Full stack (Ruby,JS) TL - с 2012г
Java, PHP, C++, Delphi - до 2012г

5. Кто я
Ruby TL React/Redux dev

6. Кто я
Ruby TL React/Redux dev
Lohika Internal
Training Program

7. Lohika Internal Training Program
Главная задача - сделать блог
Какие использовать библиотеки?
it’s up to you!

8. Lohika Internal Training Program
Главная задача - сделать блог
Backend API - NodeJS
Frontend Vanilla JS (ver 1)
Frontend React/Redux (ver 2)
Libs:
express, jade/pug, sequelize, SQL

9. Lohika Internal Training Program
Главная задача - сделать блог
Backend API - NodeJS
Frontend Vanilla JS (ver 1)
Frontend React/Redux (ver 2)
Libs:
handlebars, lodash, text

10. Lohika Internal Training Program
Главная задача - сделать блог
Backend API - NodeJS
Frontend Vanilla JS (ver 1)
Frontend React/Redux (ver 2)
Libs:
redux-thunk, lodash

11. SystemJS

12. SystemJS
АСИНХРОННЫЙ ЗАГРУЗЧИК
JS МОДУЛЕЙ ЛЮБЫХ
ИЗВЕСТНЫХ ФОРМАТОВ

13. SystemJS
ОНО СКАЧИВАЕТ ЛЮБЫЕ ES6 ФАЙЛИКИ
И ПОДГОТАВЛИВАЕТ ИХ ДЛЯ РАБОТЫ
В НЕСМЫШЛЕНОМ БРАУЗЕРЕ

14. SystemJS
ESM
CJS
AMD
GLOBAL
SYSTEM

15. SystemJS
ESM
CJS
AMD
GLOBAL
SYSTEM
ECMAScript Module

16. SystemJS
ESM
CJS
AMD
GLOBAL
SYSTEM
ECMAScript Module
CommonJS

17. SystemJS
ESM
CJS
AMD
GLOBAL
SYSTEM
ECMAScript Module
CommonJS
Async Module Definition

18. SystemJS
ESM
CJS
AMD
GLOBAL
SYSTEM
ECMAScript Module
CommonJS
Async Module Definition
свят-свят

19. SystemJS
ESM
CJS
AMD
GLOBAL
SYSTEM
ECMAScript Module
CommonJS
Async Module Definition
свят-свят
System.register(Dynamic)

20. SystemJS
ESM
CJS
AMD
GLOBAL
SYSTEM
ECMAScript Module
CommonJS
Async Module Definition
свят-свят
System.register(Dynamic)
Web Assembly !
Экспериментальная поддержка в версии 0.20

21. SystemJS

22. SystemJS
ДЕПИЛЯЦИЯ ТРАНСПИЛЯЦИЯ
ПРЯМО В БРАУЗЕРЕ
Traceur Babel TypeScript

23. Browser Development
В таком виде подгружает модули всех
форматов

24. Browser Production
В таком виде подгружает только
модули предварительно
подготовленные в формат System.register

25. Browser Production
В таком виде подгружает только
модули предварительно
подготовленные в формат System.register
И тут без Webpack’a не обойтись! Шутка

26. JSPM
JAVASCRIPT PACKAGE MANAGER

27. JSPM
Менеджер пакетов для SystemJS
Загружает пакеты из npm и Github
Есть CLI для установки пакета по принципу `npm i`
Глобальный реестр http://jspm.io
package.json используется для регистрации пакетов

28. JSPM
baseURL — путь к папке public относительно package.json.
jspm_packages — папка куда jspm будет устанавливать все
внешние зависимости.
config.js — основной файл настроек в папке baseURL.
Client baseURL — URL папки public для браузера
Transpiler — используемый транспайлер. (по умолчанию
babel).

29. JSPM
$ npm i jspm [-g]
$ ./node_modules/.bin/jspm init
$ jspm i react
$ jspm inspect | grep react
> npm:react 15.4.2

32. Code Examples

33. СПАСИБО