Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front-end tooling and DX for WordPress Developm...
Search
Ahmedabad WordPress Meetup
December 01, 2018
Technology
0
76
Front-end tooling and DX for WordPress Development - WCAhmedabad 2018
Ahmedabad WordPress Meetup
December 01, 2018
Tweet
Share
More Decks by Ahmedabad WordPress Meetup
See All by Ahmedabad WordPress Meetup
Smart Solutions Ensuring the Accessibility without breaking the bank
ahmedabadwordpress
0
24
What you do need to know to select the right webhost
ahmedabadwordpress
0
63
Unleash Generative AI: Supercharge Your Productivity with ChatGPT
ahmedabadwordpress
0
120
Tips & Tricks for the Effective Communication with or without AI Tools
ahmedabadwordpress
0
74
WWH of WordPress Plugin Testing
ahmedabadwordpress
0
35
Block theme - Full Site Editing Theme
ahmedabadwordpress
0
79
Why Woocommerce is Good Choice for creating Marketplace
ahmedabadwordpress
0
84
Ignite the Visual Appeal of your WordPress Admin panel
ahmedabadwordpress
0
120
Using Core blocks Create Gutenberg Blocks Plugin In WordPress - July 2022 Ahmedabad WordPress Meetup
ahmedabadwordpress
0
240
Other Decks in Technology
See All in Technology
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
3
270
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
110
Terraform Stacks入門 #HashiTalks
msato
0
220
FOSS4G 2024 Japan コアデイ 一般発表25 PythonでPLATEAUのデータを手軽に扱ってみる
ra0kley
1
130
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
7
550
Datadog RUM を用いた UX 指標の監視・顧客対応への活用
imamura_ko_0314
0
110
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
0
1.6k
QAEチームが辿った3年 ボクらが改善業務にスクラムを選んだワケ / 20241108_cloudsign_ques23
bengo4com
0
590
AWS⼊社という選択肢、⾒えていますか
iwamot
2
1.1k
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
28k
Mini Tokyo 3D × PLATEAU - 公共交通デジタルツインにリアルな風景を
nagix
1
230
ジョブマッチングサービスにおける相互推薦システムの応用事例と課題
hakubishin3
3
620
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Become a Pro
speakerdeck
PRO
25
5k
Ruby is Unlike a Banana
tanoku
96
11k
A Philosophy of Restraint
colly
203
16k
Designing for Performance
lara
604
68k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Facilitating Awesome Meetings
lara
49
6.1k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Designing the Hi-DPI Web
ddemaree
280
34k
Transcript
@swashata | wca.wpack.io
front-end tooling for WordPress Themes and Plugins DEVELOPER EXPERIENCE
MODERN FRONT- END TERRAIN frontend web === JS, CSS, HTML.
new language features. development tooling. large scale web application.
ES6 ECMAScript2015 ECMAScript === JavaScript released in 2015, 4 years
after ES5 easier large-scale software development. exploringjs.com
SASS CSS with superpowers super-set of CSS. sweet features to
make CSS scale. battle tested and industry approved. sasslang.com
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
AWESOME DX developer experience you deserve
DX...WHAT? experience we get while developing. Language features. Tooling. Build
and Deploy. how modern tooling helps?
TOOLING for js, css and bundling
#1. BABEL Use next generation JavaScript, today. compile ES6+ code.
target your browsers.
#2. SASS LibSass or Dart Sass compile SASS to CSS.
incredible speed. automation.
#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.
SETUP APP Write an entry-point javascript le. Tell webpack to
use the entry-point. use different loaders. HMR with webpack-dev-server.
Todo Application with react & webpack URL Demo Webpack Dev
Server Watch later Share
can we do that with WordPress? YES
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
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.
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
developing with wpackio-scripts URL Demo wpack.io Features Watch later Share
so let me ask you!! WAS IT FUN??
RECAP front-end tooling provides awesome DX. is easier to setup
today. is essential to create modern apps. can be integrated with WP development.
THANK YOU! to everyone, and WCA for giving me the
opportunity
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
Q/A ☕