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
90
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
Contributing to WPTV: A guide for WordPress TV Enthusiasts
ahmedabadwordpress
0
47
Beyond the Dashboard: Exploring the WordPress REST API
ahmedabadwordpress
0
78
Smart Solutions Ensuring the Accessibility without breaking the bank
ahmedabadwordpress
0
60
What you do need to know to select the right webhost
ahmedabadwordpress
0
84
Unleash Generative AI: Supercharge Your Productivity with ChatGPT
ahmedabadwordpress
0
160
Tips & Tricks for the Effective Communication with or without AI Tools
ahmedabadwordpress
0
99
WWH of WordPress Plugin Testing
ahmedabadwordpress
0
85
Block theme - Full Site Editing Theme
ahmedabadwordpress
0
120
Why Woocommerce is Good Choice for creating Marketplace
ahmedabadwordpress
0
120
Other Decks in Technology
See All in Technology
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
420
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
490
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
220
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
160
はじめてのOSS開発からみえたGo言語の強み
shibukazu
3
890
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
860
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
普通のチームがスクラムを会得するたった一つの冴えたやり方 / the best way to scrum
okamototakuyasr2
0
100
いま注目のAIエージェントを作ってみよう
supermarimobros
0
340
Android Audio: Beyond Winning On It
atsushieno
0
2.4k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
470
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Building Adaptive Systems
keathley
43
2.7k
Navigating Team Friction
lara
189
15k
Designing for Performance
lara
610
69k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
It's Worth the Effort
3n
187
28k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
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 ☕