DEV Community: William King

Wordpress in Elm: Designing SpringBoard

William King — Thu, 15 Aug 2019 16:02:19 +0000

Screen recording of some of the design for SpringBoard. I used Figma working through a number of different directions before settling on the final design going into development planning. It will not be the final version I imagine, but is a frame of reference.

If you would like to keep up to date with my progress and be more a part of this exploration signup for updates below or checkout the project dashboard here!

Project Dashboard

Also, feel free to leave a comment on the tweet thread:

// Detect dark theme var iframe = document.getElementById('tweet-1161384436275056650-247'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1161384436275056650&theme=dark" }

Wordpress in Elm: Shaping SpringBoard

William King — Thu, 15 Aug 2019 15:57:37 +0000

Just covering some of the project planning and shaping around the first plugin I'm building for the Elm in WordPress series. SpringBoard is a process library so that you can create, share, and manage all of your WordPress specific processes.

If you would like to keep up to date with my progress and be more a part of this exploration signup for updates below or checkout the project dashboard here!

Project Dashboard

Also, feel free to leave a comment on the tweet thread:

Will King

@wking__

Recorded a quick screencast of initial planning for the first @WordPress plugin I will be building with @elmlang. First time, but are you learning in the open if it isn't awkward sometimes? You check it out here:

youtu.be/L4MABcdbRlQ

20:30 PM - 31 Jul 2019

1 6

Why use Elm as a frontend for WordPress?

William King — Tue, 30 Jul 2019 19:44:41 +0000

I want to share my thoughts on why Elm is a good fit for WordPress. This isn't going to be a deep dive into how Elm works. I just want to hit on the opportunity space I see in WordPress for Elm, and quickly cover the problems that brought me to that conclusion. If you would like to see more practical examples of how Elm works, specifically in the context of WordPress, you can follow along here:

Project Dashboard

Finding the right place to say hello.

My goal with this project is to help bring Elm into the WordPress community , not bring WordPress into the Elm community. That may seem like a small distinction, but it makes a big impact on where the right entry point will be. WordPress is a mature and very successful platform. Soooo, WordPress developers need to be convinced that Elm is a better solution than what they've been doing...well forever.

To do that the problem space has to be niched down to find where the strengths of Elm feel like a obvious choice after struggling with WordPress. To me, the right place is....

Plugin development! Elm will not only have the most impact here, but be the easiest to adopt. Even further niched down, I want to start with plugin admin interfaces.

The Perfect Fit

Okay so about those problems I mentioned at the start. Having experienced plugin development, maintenance, and growth, the biggest problems I have faced map almost perfectly with the strengths Elm provides. Let me show you:

Blurred Lines.

Problem:

Backend code shouldn't be concerned with managing the state of the frontend.

In WordPress everything is PHP. At first this sounds nice, but what this ends up looking like in practice is a codebase where your PHP code does a little backend here and a little frontend there and suddenly the lines between the two are very blurry.

Solution:

The WordPress REST API. So your solution to the problem in WordPress is WordPress? Yes. This forces your backend to stay your backend only, and your frontend can stay your frontend. Which, by the way, working with APIs is a dream in Elm.

UI Complexity

Problem:

The plugin ecosystem is huge and the tools that developers are building are full blown applications by themselves. We're talking full on drag-n-drop, live updating, interactive metrics and more. Is PHP built specifically to handle UI complexity like this? Nope.

PHP isn't and has never been for managing complex UI. Why do you think Facebook built React? Built in state management and reusability just don't exist.

Solution:

Elm was literally built for this use case. Elm has static types, state management, and an architecture built for modularity, simplicity and reliability out of the box. I'm not going to dive into how Elm works, but you can and should read all about it here https://guide.elm-lang.org/.

Fearless Growth

Problem:

This is the big one to me. With longevity and growth comes a new set of issues. Specifically when balancing the following three facts.

Fact One: A lot of people rely on what you have built, but not only for themselves. Your plugin effects their customers and therefore their business.

Fact Two: New features and scaling to keep up with customer growth is always going to be necessary.

Fact Three: You'll have legacy code and old decisions made in the codebase that will require maintenance or updating.

These three facts mean that new releases of your plugin better be rock solid. You can't be scared to update your codebase when it is needed, or be afraid of releasing bugs because they impact your customer's business hurting them and your reputation.

Solution:

One of Elm greatest strengths is the freedom to confidently refactor your entire codebase. Don't take my word for it:

Eddy Lane

@eddlane

Over 2 years on and off with Elm and I still haven't got over the warm fuzzy feeling when you refactor hundreds of lines of code and it works perfectly first time after it compiles.

10:03 AM - 02 Jul 2018

0 2

Julien Lengrand-Lambert

@jlengrand

In 10 years of #programming, and after having used #typescript, #java, #python, #javascript and more, this is the first time that I can yolo refactor a codebase and be fairly certain that it will compile and do what I want. Thanks #elm #elmlang for this experience!

13:08 PM - 23 Jul 2018

11 35

Rao

@raorao_

writing my first elm app in a few months -- I forgot how much fun it is to refactor. You rarely have to worry about being too aggressive -- the compiler will bail you out of almost any quagmire. It's addictive, after a few months in Ruby.

23:20 PM - 01 Jul 2018

1 16

Enough from me

This is all just my opinion based on experience developing with both WordPress and Elm. I'm not saying there aren't solution or ways these problems have been solved in WordPress. I just think Elm is a valuable solution if you aren't happy with what WordPress offers, especially as a frontend developer. I cannot wait to dive in and start building Elm in Wordpress, but I want to hear from you too!

If you would like to keep up to date with my progress and be more a part of this exploration signup for updates below! Also, feel free to leave a comment on the tweet thread for this article:

Signup for updates:

Follow Along

Tweet thread:

Will King

@wking__

1/I want to share my thoughts on why Elm is a good fit for WordPress. This isn't going to be a deep dive into Elm. I just want to hit on the opportunity space I see in WordPress for Elm, and quickly cover the problems that brought me to that conclusion.

19:39 PM - 30 Jul 2019

0 2

WordPress needs a front end framework

William King — Mon, 29 Jul 2019 18:17:19 +0000

Cross post from: https://www.wking.dev/content/articles/wordpress-needs-a-frontend-framework/

The complexity of websites is growing exponentially and Wordpress is not immune. Although commonly thought of as a blogging platform, the company I work for and thousands of other use it for so much more.

The Missing Link

Frameworks, tools, and even new languages have been created to help manage the complexity. However, WordPress does not have a story around how these new tools fit into developing for their platform. That is what I want to help fix.

That being said, I want to bring Elm into the WordPress community the right way. How do you justify Elm when working with a system that is so ingrained in how not only the backend is written, but the frontend as well? Is there even a case for building WordPress sites and applications with Elm? Obviously, I think the answer is yes, but I want to learn and share more about what that system looks like.

So, what's the plan?

That's a good question. The only plan I have right now is to use my experience in WordPress and Elm to start exploring intersections where these two technologies support each other. Aka, I am just going start building and see where it takes me.

The more the merrier

There are plenty of more experienced WordPress or Elm developers out there, and hopefully doing this in the open will encourage help from those who see this and are passionate about bring these two worlds together like I am!

Right now the plan is very fluid and will be changing along the way. I hope to give updates and provide breakthroughs. Also, there might be research/feedback that will need input from the broader community.

If you would like to be updated in an email for any of these reasons signup below. Otherwise, I will try and share them in some format on Twitter and in the Elm communities.

Signup for updates:

Follow Along

Tweet thread:

// Detect dark theme var iframe = document.getElementById('tweet-1155895077518155777-607'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1155895077518155777&theme=dark" }

Beta testers needed: New feature in elm-live

William King — Tue, 06 Nov 2018 19:49:08 +0000

I just released a beta for elm-live that adds the ability to pass multiple arguments to the --before-build and --after-build flags. Would love some people to test it out and let me know what they think!

Install: npm install elm-live@beta [--save-dev]

This opens up the ability to chain multiple scripts into a script file that takes arguments, or make an npm script that chains different commands.

elm-live src/Main.elm --before-build="npm run things" --after-build="customstuff.sh --flag"

Why do you change the host? Custom host in local development

William King — Mon, 05 Nov 2018 16:39:28 +0000

I am looking to improve docs for https://github.com/wking-io/elm-live and had a question about hosts. What are use cases where you change the host for your local development server from localhost? Would love to pull data from other developers outside of my personal experience!

From other discussions I have heard the following:

Testing https://
Testing subdomains
Just like setting up pretty domains for local dev

Hi, I'm William King

William King — Thu, 06 Jul 2017 12:40:47 +0000

I have been coding for 2 years. I started with a background in Design from Auburn University, but started learning Front End Dev and never looked back.

I have been a long time reader, but decided I want to start sharing as well. I hope that what I write will help others out there who are trying to navigate that fun grey area in-between being a Junior and Senior Dev hahah.

You can find me on GitHub as wking-io

I live in Montgomery, AL.

I work for Skillcrush as a Junior Front End Dev.

I mostly program in these languages: Javascript / PHP / SCSS.

I am currently learning more about Javascript, React, Webpack, and all things required to build full Javascript applications.

Nice to meet you.