Downloaded 10 times
![Webpack
Webpack может подключить любые файлы как модули
В конфиге указываются лоадеры к расширениям файлов.
Лоадеры обрабатывают их по вашим правилам.
При этом в JS код возвращается мета-информация.
используете CSSModules со стилями?
тогда в stylesMap будет записан хэш
{ [имя класса из scss]: название
после сборки }
картинки получают уникальные
названия для кеширования?
тогда в imagePath будет записан
новый уникальный uri до файла
а ещё lazy loading, chunks, vendors и tree shaking](https://image.slidesharecdn.com/backend-frontend-160807083258/85/nodkz-24-320.jpg)
Uploaded byPavel Chertorogov
Бэкенд, фронтенд — всё смешалось (nodkz)
Документ представляет собой обзор эволюции веб-разработки с акцентом на использование современных технологий, таких как React, GraphQL, Node.js и Webpack. Автор делится личным опытом и историей своего профессионального пути, затрагивая изменения в подходах к разработке и инструментам. Выделяются преимущества и недостатки новых технологий, а также их влияние на процесс создания приложений и взаимодействие с клиентом.
Бэкенд, фронтенд — всё смешалось (nodkz)
- 2. Бэкенд, фронтенд — всёсмешалось. Экскурсия в будущее веб-разработки. Мой стэк для SPA.
- 3.
- 4. ES next andBabel Webpack and Tools Isomorphic JavaScript NodeJS and React Relay, GraphQL My history SPA and ServiceWorker
- 5.
- 6. My history 2001 2004 Сайт санекдотами в школьном интранете. Веб-сайт nod.h1.ru с ответами на реферальные регистрации. HTML 2000 - hover на кнопках - анимированные GIF - under construction и powered by, - выпадающее меню вверх мастерства, - marquee 2004.04 Дата запуска Gmail Первое на моей памяти SPA wap.mobi.kz 2004.08 mobi.kz 2005.06 2005.02 AJAX 2006.09 jQuery 2006 2008 Автоматизация верстки журнала и газет Колёса, Крыша 31 апреля 2006 1 версии (www, wap) 2008.06 AppStore 2009.05 NodeJS 2008.09 V8
- 7. My history2010-11 Responsive 2010 март 2010 2версии сайтов отвязанные от газет 2011.08 Bootstrap 2010.10 Backbone 2011.12 Meteor 2010 Angular 1 2011.09 Ember 1 2011 июнь 2011 новый сайт зарождение биллинга 2013 RoR, SEO, сборщики, tons of JS
- 8. My history 2015 Sep 2версия сайта и слияние с DNR.kz 2014.08 ServiceWorker 2015.08 Ember 22014-2016 and not ready yet Angular 2 RC 2013.03 React Aйрат Жаншуаков показал CodeKit Dan Abramov показал Hot Reload Sebastian Markbage влюбил принципами разработки React 2015 July 2015 Apr
- 9.
- 10. SPA and ServiceWorker Hello, JakeArchibald! 2014.08 работа в условиях потери связи управление кэшем ресурсов управление сетевыми HTTPS запросами До свидания, AppCaсhe https://developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers https://github.com/NekR/offline-plugin for webpack by Arthur Stolyar 66.8% in KZ 59% in Global caniuse.com ServiceWorker это —
- 11. SPA and ServiceWorker БумMobile Apps проходит, приходит бум Single Page Applications. уже доступно SEO, если есть server side rendering не надо ничего устанавливать на телефон удешевление разработки (одна команда, вместо трех) Скорость и функционал немного не дотягивают до Mobile Apps Service Worker Cookbook: https://serviceworke.rs/ НО Мобильные приложения не вымрут, но шальных непонимающих заказчиков станет меньше.
- 12. ES next иBabel
- 13. ES next иBabel ES6 (ES2015, harmony) ES7 (ES2016) любые будущие proposals or possibilities ES next — get `ES next` and transform to `ES current`Babel — ES current — ES5 (ECMAScript 5) TC39 — комитет (люди которые решают, как улучшать язык) свои плагины в обход TC39 ES6 можно считать в`ES current` для SF10, CH52, FF49, Edge 14, Node 6 http://kangax.github.io/compat-table/es6/
- 14. ES next иBabel transform syntax babel-preset-es2015 babel-polyfill new globals and object extensions
- 15. ES next иBabel Arrow Functions in ES6
- 16. ES next иBabel Default Parameters in ES6
- 17. ES next иBabel Destructuring Assignment in ES6
- 18. ES next иBabel Template Literals in ES6
- 19. ES next иBabel Enhanced Object Literals in ES6
- 20. ES next иBabel Classes in ES6
- 21. ES next иBabel До свидания, CoffeeScript Так получается, что c ES next я могу больше чем с CoffeeScript. Для меня сахар ES6 уже вполне сопоставим с CoffeeScript. Async/await для меня важнее, чем отсутсвие скобочек в CoffeeScript. Import/export, уже не могу без ES6 модульности. В модулях я использую flowtype для проверки типов. И меня смущает, что до сих пор мало кто из больших компаний им пользуется.
- 22.
- 23. Webpack Webpack — ключевоеслово module bundler
- 24. Webpack Webpack может подключитьлюбые файлы как модули В конфиге указываются лоадеры к расширениям файлов. Лоадеры обрабатывают их по вашим правилам. При этом в JS код возвращается мета-информация. используете CSSModules со стилями? тогда в stylesMap будет записан хэш { [имя класса из scss]: название после сборки } картинки получают уникальные названия для кеширования? тогда в imagePath будет записан новый уникальный uri до файла а ещё lazy loading, chunks, vendors и tree shaking
- 25. Webpack The streaming build system TaskRunner основан на конфигурации end 2011 основан на потоках mid 2013 http://sixrevisions.com/web-development/grunt-vs-gulp/ May 11, 2015 Grunt Gulp
- 26. Webpack https://www.youtube.com/playlist?list=PLDyvV36pndZHfBThhg4Z0822EEG9VGenn Скринкаст от ИльиКантора по Webpack 1: Rollup.js — the next-generation JavaScript module bundler. Tutorials Competitors Official docs http://webpack.github.io/docs http://rollupjs.org Browserify lets you require('modules') in the browser by bundling up all of your dependencies. http://browserify.org/
- 27. Webpack До свидания, Grunt,Gulp — вы не для SPA
- 28.
- 29. Awesome tools До свидания,WebStorm, Sublime Atom — a hackable text editor for the 21st Century
- 30. Awesome tools Atom неAtom, без этих плагинов: Nuclide от Facebook Дополнительно устанавливает много полезных пакетов. Поддерживает автокомплит, jump-to-definition, flowtype. Раз в неделю обновляется. LiveStyle для CSS, LESS и SCSS (Sergey Chikuyonok) Один большой минус, не нашел плагина с GUI для git’а, который был настолько же крут, как у WebStorm (IntelliJ IDEA). Atom поддерживает flowtype из коробки.
- 31. Awesome tools ESLint Mocha+chai Create ramdisk on MacOS: diskutil erasevolume hfsx my_ram_disk `hdiutil attach -nomount ram://1000000`; проверяет типы, наличие методов, очень глубоко сканирует код. Ловит баги до запуска JS кода. Интегрирован в Nuclide (Atom). Работает моментально, код компилировать не нужно. Обалденная вещь, если вы пишите библиотеку! проверяет ваш JS код на соответствие style-guide, находит простые ошибки по коду. Рекомендую eslint-config-airbnb Невероятно полезная вещь! для написания BDD тестов C Jest у меня что-то не сложилось, он слишком умный. Flowtype
- 32. Awesome tools Экономьте своевремя смотрите презентации в YouTube в ускоренном режиме Три презентации по времени двух! ALT+SHIFT+Ю — быстрее ALT+SHIFT+Б — медленнее Невероятная акция от YouTube!
- 33.
- 34. Isomorphic JavaScript What isIsomorphic JavaScript? This is code, that can be run on client and server. thin server Persistence Application logic View layer Routing DOM, forms, animations fat server thin client Now fat client Early @nodkz
- 35. Isomorphic JavaScript Что даетIsomorphic JavaScript? Уменьшение количества кода. Код можно выполнить на клиенте и на сервере. SEO для поисковиков. Скорость работы приложения на клиенте.
- 36.
- 37. NodeJS Вкраце о NodeJS Однопоточныйдает скорость, т.к. не нужно переключать контекст между потоками Cheap connections малое потребление памяти для подключений 600k idle connections on AWS M3.xlarge with 15GB RAM: https://www.jayway.com/2015/04/13/600k-concurrent-websocket-connections-on-aws-using-node-js/ JavaScript да-да тот самый язык, если до этого писали код только в браузере ;) EventLoop внутренняя очередь заданий для асинхронности Cамое то для Isomorphic Apps с тонким сервером
- 38. NodeJS Худшее о NodeJS:как и везде Утечки памяти Если кросс-ссылоки, куча хитрых объектов и событий. Лечится прямыми руками, либо супервизорами: pm2, forever Exceptions Иногда просто хочется сказать, и чё ты мне вывел? Лечится гаданием на кофейной гуще. Или методом тыка. npm install Куча модулей и файлов, все постоянно обновляется и может сломаться, хотя у вас все работает. Лечится жестким фиксированием версий в package.json. Если используете shrinkwrap, то руками версии в package.json править нельзя. Однопоточный Если что-то тяжелое начало выполняться, то все остальное накрывается медным тазом. Лечение запускать больше инстансов, либо дробить задачу
- 39.
- 40. React — What aboutEmber? Андрей Листочкин Горячо рекомендую посмотреть его доклады в YouTube. Неимоверно крутой чувак. В Ember уже давно все есть, что появляется в React’e: компонентный подход, react-router, ожидается react cli. А до Ember был Borland Delphi, a до — Xerox PARC, а до — только калькуляторы. Но для меня важно, кто стоит за проектом и как развивает комьюнити. До свидания, Ember — прости ты не мой выбор. Проблема во мне, проблема не в тебе! Если не React, то точно Ember!
- 41. React React VirtualDom Обновляет вDOM только то, что поменялось. Быстро и без скрипа. Great life cycles Делайте с компонентами что хотите, на любом из этапов их жизненного цикла. Errors on build Очень много проверок на этапе билда. Events Своя event система, работающая во всех браузерах/устройствах, которые использовал. JS oriented HTML in JS. Not html extension. Всё что вы пишите, пишите на JavaScript. JSX syntax Удобное решение для разметки элементов. Очень похож на html.
- 42. React React Component lifecycle Sorry,but I can not found an author of this diagram.
- 43. React Rect-DOM styling with CSSModules Webpackconfig Production DOM Development DOM
- 44.
- 45. React react-dom react-native react-webGL What in thefuture? compatibility DOM and NATIVE components Isomorphic react package that manipulates DOM on client, or generates html string on the server. A framework for building native apps using React. Supported OS: >= Android 4.1 (API 16) and >= iOS 7.0. Where is React works now? react-canvas React Canvas adds the ability for React components to render to <canvas> rather than DOM hell knows what else … https://github.com/reactjs/react-future
- 46. React Fast start forexisting project with React https://www.youtube.com/watch?v=BF58ZJ1ZQxY Ryan Florence Don't Rewrite, React! at react-europe 2015 Начните переписывать функционал снизу вверх. К примеру, начните с формочки добавления комментариев. Затем к отображению комментария. Ну и под конец сделайте список. BOOM! И комментарии готовы. Потом к статье, потом к меню. И не заметите как все приложение у вас на React. С Angular такое не пройдет, надо переписывать все сразу и целиком.
- 47. React Quick start fromscratch
- 48. React Quick start fromscratch July 22, 2016 by Dan Abramov, Christopher Chedeau, Kevin Lacker Create Apps with No Configuration https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html May 5, 2016 by Konstantin Tarkus (@koistya) React App SDK Uses Webpack, Babel, ESLint under the hood https://github.com/kriasoft/react-app Uses Webpack, Babel, ESLint, Hot Loader, Postcss, Browser-sync Why Kostya still does not work at Facebook?! I can not understand. Best of the Best / Suggested Reading List https://github.com/markerikson/react-redux-links Curated tutorial and resource links by Mark Erikson (@acemarke) This collection gets more than 150 reactions in my twitter.
- 49. React Quick start fromscratch Other recommended resources: https://www.udemy.com/user/sgslo/ For React recommended author is Stephen Grider https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/ Paid courses on udemy.com https://www.pluralsight.com/authors/cory-house Building apps with React and Redux in ES6 by Cory House http://egghead.io Huge tutorial with screenshots: Cloning Yelp by Ari Lerner Many lessons available free and by subscription Wired parts in JS and NodeJS by Anthony Alicea (also great courses by Docker, AWS) Paid courses on pluralsight.com https://www.udemy.com/user/anthonypalicea/ Many many FREE talks on YouTube. Eg. ReactEurope 2015-2016 https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A
- 50.
- 51. GraphQL “With GraphQL, wecould simply stop writing API documentation or reading it. I think that’s the dream of every developer.” — by @arunoda GraphQL is a query language developed by Facebook Lee Byron Nicholas Schrock Daniel Schafer Authors before and after releasing GraphQL SPEC
- 52. GraphQL GraphQL at anybackend as you wish!
- 53. GraphQL GraphQL with anymix of databases! Implements any custom bussines logic. Also works with existing code. One GraphQL query may combine results from different data sources.
- 54. GraphQL GraphQL at anyclient as you wish! The best solution to fetch data for web apps, mobile apps, and 3rd party clients. Any nesting and combination of data in one request. No more nor less then the client requests.
- 55. GraphQL GraphiQL — interactivein-browser GraphQL IDE http://toolbox.sangria-graphql.org/graphiql Try it! http://graphql-swapi.parseapp.com/ http://reidex.io/ beginner lvl medium lvl expert lvl /ˈɡrafək(ə)l/
- 56.
- 57. GraphQL Several queries inone request Also please note: only requested data, no more nor less! 3 REST requests in single GraphQL query
- 58. GraphQL Any nesting inone request ProTIP: Use DataLoader for reducing over-fetching (one record several times) https://github.com/facebook/dataloader https://medium.com/apollo-stack/graphql-explained-5844742f195eHow nested queries works:
- 59. GraphQL Fragments (preparation forcomponents) In GraphQL, fragments are the way to group commonly used fields and reuse them. Components are perfect correlated with Fragments Required DataRender instructions
- 60. GraphQL Schema definition onserver Your First GraphQL Server by Clay Allsopp: https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2
- 61. GraphQL Mutations and Subscriptions Mutations= add, change or remove data on server Subscriptions = send requested data, as soon you have new one Mutation have similar syntax as Query. But multiple Mutations in a single request are executed one by one. I can not recommend any good OSS solution.
- 62. GraphQL Any complex querieson your frontend less network traffic less time for processing less time to develop less request numbers less possibilities for errors less stress more success
- 63.
- 64. GraphQL Tutorials https://learngraphql.com http://graphql.org/docs/getting-started/Official Client Useful OSS libraries https://github.com/matthewmueller/graph.ql Fasterand simpler technique for creating and querying GraphQL schemas on server https://github.com/mickhansen/graphql-sequelize GraphQL & Relay for MySQL & Postgres via Sequelize A GraphQL API created by reflection over a PostgreSQL schema https://github.com/calebmer/postgraphql My OSS family of packages graphql-compose https://github.com/nodkz/graphql-compose https://medium.com/apollo-stack/tutorial-building-a-graphql-server-cddaa023c035 Tutorial: How to build a GraphQL server
- 65.
- 66. Relay Components are perfectcorrelated with Fragments Required DataRender instructions Relay A javascript framework for building data-driven React application with GraphQL
- 67. Relay React, Relay, GraphQL— all together
- 68. Relay Conditional fetching Mutations Optimisticupdates Pagination Retry Error handling Rollback Cache Relay
- 69. Relay https://www.youtube.com/results?search_query=relay+react Talks from authorsSteven Luscher, Joseph Savona, Greg Hurrell Lokka — Simple JavaScript Client for GraphQL Tutorials Competitors Official docs https://facebook.github.io/relay/ https://github.com/kadirahq/lokka Apollo is an incrementally-adoptable data stack that manages the flow of data between clients and backends. http://www.apollostack.com/
- 70. React, GraphQL, Relay,Nuclide, Flowtype, Jest Harmonious work of all OSS projects by Facebook You should not use Facebook OSS products, if you’ll take a financial interest or any Patent Assertion against Facebook.
- 71. — Так что,у вас бэкенд с фронтендом смешался?
- 72. До свидания, Bower,jQuery, современные wap-сайты, рендеринг для клиентов на сервере, старый добрый императивный подход. До свидания, бесполезные версии продуктов, которые приходится по-взрослому обслуживать. — Адаптивность? Нееее, не слышали.
- 73.
- 74. Problems Много всего нового! Многотерпения и желания! React Babel Webpack GraphQL Relay NodeJS ES next Много времени на изучение! А ещё, надо всё друг с другом “поженить”!
- 75. nodkz В этой жизнивозможно все. Просто на невозможное, требуется больше времени. А жизнь слишком коротка, чтобы заниматься вещами, которые ничего не меняют.