Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Lab2017_Сергей Селецкий_System.js и jspm

96 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JS Lab2017_Сергей Селецкий_System.js и jspm

  1. 1. JSPM ИЛИ КАК ОБОЙТИСЬ БЕЗ WEBPACK’А СЕРГЕЙ СЕЛЕЦКИЙ @SSELETSKYY
  2. 2. ПРОВЕРКА МИКРОФОНА
  3. 3. О ЧЕМ МЫ ПОГОВОРИМ • Кто я. Где я. И почему. • Что такое SystemJS и jspm • Как сконфигурировать проект • Пишем только на ES6 • Модульная сборка против bundle-sfx
  4. 4. Кто я Frontend (React) developer - сейчас 
 Full stack (Ruby,JS) TL - с 2012г Java, PHP, C++, Delphi - до 2012г
  5. 5. Кто я Ruby TL React/Redux dev
  6. 6. Кто я Ruby TL React/Redux dev Lohika Internal Training Program
  7. 7. Lohika Internal Training Program Главная задача - сделать блог 
 Какие использовать библиотеки? it’s up to you!
  8. 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. 9. Lohika Internal Training Program Главная задача - сделать блог 
 Backend API - NodeJS Frontend Vanilla JS (ver 1) Frontend React/Redux (ver 2) Libs: handlebars, lodash, text
  10. 10. Lohika Internal Training Program Главная задача - сделать блог 
 Backend API - NodeJS Frontend Vanilla JS (ver 1) Frontend React/Redux (ver 2) Libs: redux-thunk, lodash
  11. 11. SystemJS
  12. 12. SystemJS АСИНХРОННЫЙ ЗАГРУЗЧИК JS МОДУЛЕЙ ЛЮБЫХ ИЗВЕСТНЫХ ФОРМАТОВ
  13. 13. SystemJS ОНО СКАЧИВАЕТ ЛЮБЫЕ ES6 ФАЙЛИКИ 
 И ПОДГОТАВЛИВАЕТ ИХ ДЛЯ РАБОТЫ В НЕСМЫШЛЕНОМ БРАУЗЕРЕ
  14. 14. SystemJS ESM CJS AMD GLOBAL SYSTEM
  15. 15. SystemJS ESM CJS AMD GLOBAL SYSTEM ECMAScript Module
  16. 16. SystemJS ESM CJS AMD GLOBAL SYSTEM ECMAScript Module CommonJS
  17. 17. SystemJS ESM CJS AMD GLOBAL SYSTEM ECMAScript Module CommonJS Async Module Definition
  18. 18. SystemJS ESM CJS AMD GLOBAL SYSTEM ECMAScript Module CommonJS Async Module Definition свят-свят
  19. 19. SystemJS ESM CJS AMD GLOBAL SYSTEM ECMAScript Module CommonJS Async Module Definition свят-свят System.register(Dynamic)
  20. 20. SystemJS ESM CJS AMD GLOBAL SYSTEM ECMAScript Module CommonJS Async Module Definition свят-свят System.register(Dynamic) Web Assembly ! Экспериментальная поддержка в версии 0.20
  21. 21. SystemJS
  22. 22. SystemJS ДЕПИЛЯЦИЯ ТРАНСПИЛЯЦИЯ ПРЯМО В БРАУЗЕРЕ Traceur Babel TypeScript
  23. 23. Browser Development В таком виде подгружает модули всех форматов
  24. 24. Browser Production В таком виде подгружает только модули предварительно подготовленные в формат System.register
  25. 25. Browser Production В таком виде подгружает только модули предварительно подготовленные в формат System.register И тут без Webpack’a не обойтись! Шутка
  26. 26. JSPM JAVASCRIPT PACKAGE MANAGER
  27. 27. JSPM Менеджер пакетов для SystemJS Загружает пакеты из npm и Github Есть CLI для установки пакета по принципу `npm i` Глобальный реестр http://jspm.io package.json используется для регистрации пакетов
  28. 28. JSPM baseURL — путь к папке public относительно package.json. jspm_packages — папка куда jspm будет устанавливать все внешние зависимости. 
 config.js — основной файл настроек в папке baseURL. 
 Client baseURL — URL папки public для браузера 
 Transpiler — используемый транспайлер. (по умолчанию babel).
  29. 29. JSPM $ npm i jspm [-g] $ ./node_modules/.bin/jspm init $ jspm i react $ jspm inspect | grep react
 > npm:react 15.4.2
  30. 30. Code Examples
  31. 31. СПАСИБО

×