Front-end tooling and DX for WordPress Development - WCAhmedabad 2018

Transcript

1. @swashata | wca.wpack.io
2. front-end tooling for WordPress Themes and Plugins DEVELOPER EXPERIENCE
3. MODERN FRONT- END TERRAIN front­end web === JS, CSS, HTML. new language features. development tooling. large scale web application.
4. ES6 ECMAScript2015 ECMAScript === JavaScript released in 2015, 4 years after ES5 easier large-scale software development. exploringjs.com
5. SASS CSS with superpowers super-set of CSS. sweet features to make CSS scale. battle tested and industry approved. sass­lang.com
6. NPM PACKAGES install npm i lodash axios main.js import _ from 'lodash'; import axios from 'axios'; const peopleWhoLoveWP = axios .get('/users') .then(users => _.filter(users, user => user.loveWP)); npmjs.com
7. AWESOME DX developer experience you deserve
8. DX...WHAT? experience we get while developing. Language features. Tooling. Build and Deploy. how modern tooling helps?
9. TOOLING for js, css and bundling
10. #1. BABEL Use next generation JavaScript, today. compile ES6+ code. target your browsers.
11. #2. SASS LibSass or Dart Sass compile SASS to CSS. incredible speed. automation.
12. #3. WEBPACK static module bundler for modern JavaScript applications. modular JS/CSS code and imports. fonts, images and other les. can use babel and sass compiler.
13. SETUP APP Write an entry-point javascript le. Tell webpack to use the entry-point. use different loaders. HMR with webpack-dev-server.
14. Todo Application with react & webpack URL Demo Webpack Dev Server Watch later Share
15. can we do that with WordPress? YES
16. so we have to con gure babel? webpack? node-sass? ipity op? uppity oop? and we have to do that everytime? how do we tell WP to use stuff from webpack? how do we have webpack-dev-server for HMR? LET US SEE
17. wpack.io webpack and browser-sync based front-end tooling for WordPress (OSS - MIT Licensed) develop modern large-scale front-end heavy WordPress plugins and themes out of the box babel, sass and more. works with any local wp dev server. integrate with any project you have. dev server with live reload and HMR.
18. INTEGRATE Install nodejs. Add - npx @wpackio/cli Bootstrap - npm run bootstrap PHP - composer require wpackio/enqueue Server - npm start Build - npm run build Pack - npm run archive
19. developing with wpackio-scripts URL Demo wpack.io Features Watch later Share
20. so let me ask you!! WAS IT FUN??
21. RECAP front-end tooling provides awesome DX. is easier to setup today. is essential to create modern apps. can be integrated with WP development.
22. THANK YOU! to everyone, and WCA for giving me the opportunity
23. NOTES Slide https://wca.wpack.io Docs https://wpack.io Webpack demo https://git.io/fpcEo wordpress demo https://git.io/fpcEK slides https://git.io/fpEex
24. Q/A ☕