WP Tavern › Forums › Create Topic
Travis Hensgen I’ve been working a lot over the last few months with the type of stack Calypso uses. The learning curve is admittedly steep, and I would focus on learning: * ES6 (aka ECMAScript 2015) – a lot of React / JS devs are writing everything in ES6 now, and with good reason as there are some syntax constructs which dramatically simplify this type of development. Arrow functions, imports and destructuring assignments in particular make working with React a whole lot easier. This is a good overview: https://github.com/lukehoban/es6features * Node / CommonJS – You’ll need to be familiar with CommonJS module syntax and how this works alongside Node and NPM. * Webpack (!!!) – the build tool of choice for the React / Module stack. Webpack is a little bit like Grunt and Gulp, and a bit more like Browserify. It’s purpose is to bundle up all of the code in your headless JS app into one or more production files, so that you don’t need to manually include your dependencies. This goes beyond just JavaScript though: Webpack has the concept of “loaders” which allow you to “require” things like images and CSS files directly in your JavaScript, and those will be included inside the production bundle as well, via data URLs (for images) or inline stylesheets (for CSS/SASS/LESS etc). There is also a Babel loader which transpiles ES6 and React JSX into browser compatible JavaScript. Webpack is tricky to learn but it is an absolutely amazing technology, and I think it’s a critical part of this future of web dev which Matt is talking about. * Flux (or Redux): You’ll need to know a bit about the Flux pattern created by Facebook, which enforces unidirectional data flow throughout an app. The current Flux implementation of choice is “Redux”, which has gained rapid momentum because it implements just the right parts of Flux, and can allow amazing things like hot reloading, where you can change components in your app, which is immediately seen by the browser without refresh. Flux / Redux is quite tricky to learn too, as the pattern is really quite different from monolithic PHP apps or even MVC-JS apps. Calypso doesn’t appear to use Redux, probably because Redux was created well after they started Calypso. * Bonus: PostCSS (https://github.com/postcss/postcss). The new take on LESS and SASS, which can work in tandem with webpack to allow you to work with custom or future-spec CSS rules, which are then transpiled into compatible CSS. This is really cool as it’s not monolithic like LESS/SASS, and you can pick as many PostCSS plugins as you like to enhance the capabilities of CSS. For example, if you want to implement a “clearfix”, you can add the postcss-clearfix plugin, and then use just “clear: fix” as a rule in your stylesheets, which is compiled down to the standard “:after” syntax. So, ahem, there’s a lot to learn here, but it’s a very cool stack, and does really feel like the future of web apps to me too :)
Travis Hensgen
I’ve been working a lot over the last few months with the type of stack Calypso uses. The learning curve is admittedly steep, and I would focus on learning:
* ES6 (aka ECMAScript 2015) – a lot of React / JS devs are writing everything in ES6 now, and with good reason as there are some syntax constructs which dramatically simplify this type of development. Arrow functions, imports and destructuring assignments in particular make working with React a whole lot easier. This is a good overview: https://github.com/lukehoban/es6features
* Node / CommonJS – You’ll need to be familiar with CommonJS module syntax and how this works alongside Node and NPM.
* Webpack (!!!) – the build tool of choice for the React / Module stack. Webpack is a little bit like Grunt and Gulp, and a bit more like Browserify. It’s purpose is to bundle up all of the code in your headless JS app into one or more production files, so that you don’t need to manually include your dependencies. This goes beyond just JavaScript though: Webpack has the concept of “loaders” which allow you to “require” things like images and CSS files directly in your JavaScript, and those will be included inside the production bundle as well, via data URLs (for images) or inline stylesheets (for CSS/SASS/LESS etc). There is also a Babel loader which transpiles ES6 and React JSX into browser compatible JavaScript. Webpack is tricky to learn but it is an absolutely amazing technology, and I think it’s a critical part of this future of web dev which Matt is talking about.
* Flux (or Redux): You’ll need to know a bit about the Flux pattern created by Facebook, which enforces unidirectional data flow throughout an app. The current Flux implementation of choice is “Redux”, which has gained rapid momentum because it implements just the right parts of Flux, and can allow amazing things like hot reloading, where you can change components in your app, which is immediately seen by the browser without refresh. Flux / Redux is quite tricky to learn too, as the pattern is really quite different from monolithic PHP apps or even MVC-JS apps. Calypso doesn’t appear to use Redux, probably because Redux was created well after they started Calypso.
* Bonus: PostCSS (https://github.com/postcss/postcss). The new take on LESS and SASS, which can work in tandem with webpack to allow you to work with custom or future-spec CSS rules, which are then transpiled into compatible CSS. This is really cool as it’s not monolithic like LESS/SASS, and you can pick as many PostCSS plugins as you like to enhance the capabilities of CSS. For example, if you want to implement a “clearfix”, you can add the postcss-clearfix plugin, and then use just “clear: fix” as a rule in your stylesheets, which is compiled down to the standard “:after” syntax.
So, ahem, there’s a lot to learn here, but it’s a very cool stack, and does really feel like the future of web apps to me too :)
Name *
Email *
Website:
Topic Title (Maximum Length: 80):
Forum: — No forum —AI and WordPress Articles Blocks Showcase Discussions Events Introductions Jobs and Working in WordPress Podcast Episodes Site and Block Editor
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
Email Address
Submit
Enter the destination URL
Or link to existing content
