Captain Codeman

Tag: redux

Web Development Without a Framework

How difficult is it to assemble the pieces you need

As President Kennedy implored:

“My fellow developers, ask not what your Framework can do for you. Ask what you can do for your framework!”.

Yeah, I know, not quite the exact quote. But sometimes it feels that you have to do more to help your framework work than your framework does to help you.

Two years ago I was working with Angular 2 and if you managed to get your compressed javascript payload under 200Kb you thought you were doing pretty well. I remembered about it when I realized I can now have an app with far more functionality and be easily within 15Kb.

Maybe it’s time to ask yourself, what is your Framework really doing for you … and do you still need it?

angular redux web-components polymer

Do you still need that framework?

Thoughts on Polymer 3.0 after Polymer Summit 2017

How I think I'll be writing web apps a year from now

First of all, let me make clear that I have no inside knowledge and am not privy to any secrets - my views are based purely on using the platform, hanging out in Slack and watching the presentations.

It’s also maybe useful to describe where I “am” as a web developer. I used to use Angular 1 and then 2, never really cared much for React but was aware of it (and like Redux) but was totally sold on WebComponents and the benefits of any framework being built on the platform. When Angular 2 turned out to be a huge letdown and Polymer had turned 1.x it was time to change and I’ve been happy with the choice. I find it quicker to develop apps and I’m spending more time on app-development and much less on endless framework upgrades plus the end results start and run faster.

polymer web-components redux

disappointment and anticipation

Project Structure for Using Redux with Polymer 2.0

ES6 imports vs HTML imports ... fight!

In the last post I showed how to use a pure Polymer / WebComponent approach for sharing state between components when they were separated in the DOM.

This works great for discreet isolated pieces of state but as you work with larger and more complex apps there are definite benefits to be had by using something like Redux to centralize things.

Redux of course comes from the React world, filled with JavaScript and ES6 imports - so how do you make it all play nicely with Polymer and Html Imports? Of course you could have your store, all the reducers, actions and so on as a set of JavaScript files and introduce a build step to generate the code to then include in your Polymer project but in my experience it’s complex and never feels quite right and you still have to figure out how to integrate the Redux parts with Polymer.

polymer redux

Here's how I organize my Redux Store with Polymer ...

Managing State in Polymer 2.0 - Beyond Parent / Child Binding

Share state between separated DOM elements without Redux

To demonstrate how simple a framework is to use and how productive you can be with it, the examples provided are often deliberately simple to fit the easy-use cases. It makes sense to keep things simple for people learning but it can sometimes leave a gap when you need to step beyond the trivial and start building more complex, real-world apps.

One place where this seems to be especially apparent is when it comes to state-management and Polymer is of course no exception. The typical examples you’ll see most often involve a single parent and one or more child elements and some binding between them. But what if things are not so simple? How do you pass state between things? Do you need to start adding Redux to do it?

polymer redux

See the easy way to share state in Polymer