Introducing Pentacle: A Reactive Web Learning Nexus

w3ird0h
3 min readMar 5, 2019

--

Photo of man sitting on chair near desk surrounded with books by Elijah Hail on Unsplash

The pentacle site has been taken down with it’s content to be published later.

Learning resources have been moved to https://learnreactive.com , this post remains as prior art.

TL;DR — Want to learn more about what reactive means, or get more knowledge about a tool like RxJS? Check out the Resources page of Pentacle for reactive web learning materials

Reduce the complexity of building web applications.

That’s the goal of the ideas and techniques discussed on Pentacle. Simplification is achieved through architecture with a mixture of strategies. At the core of this architecture is reactivity, so our focus is Reactive Web Architecture.

The most used front-end JavaScript frameworks all support this architecture and thrive on it:

Fortunately, a lot of smart people in the community have developed ideas, strategies, and productivity tools that enable us to build with reactivity in mind.

But if you’re new to these ideas, it can be confusing, frustrating, and overwhelming to get started — like a 5000-piece Lego set that didn’t come with directions! Pentacle can help.

On Pentacle you can learn more about

  • Common patterns found in popular front-end JavaScript applications (React, Vue, Angular)
  • Reactive Architecture
  • Reactive Extensions (RxJS+)
  • Object Oriented Design Patterns
  • Functional Reactive Programming 😱
  • State Management (Redux, NgRx, etc)

So that you can build reactive systems that are

  • Robust
  • Maintainable
  • Extensible
  • Performant

The Key Ideas

  1. Give different types of responsibilities to separate layers of the application.
  2. Help those layers communicate by using a common language and structure.
  3. Adopt specific principles to build reactive attributes into a system.

Pentacle’s Goals

  1. Collect and present idiomatic, battle-tested, community-supported strategies.
  2. Present framework agnostic concepts that can be applied in many different platforms.
  3. Provide a catalog of learning resources.
  4. Connect developers with implementations and tools related to reactive web architecture.
  5. Lead by example. Pentacle is built on these principles, and the code is open source.
  6. Showcase interactive examples of reactive solutions.

Pentacle will first focus on reactive coding practices and examples from front-end implementations. The goal is to get that right and grow from there.

As Pentacle grows, there will be room for more variety in tooling and implementations in our examples. For now, these tools will be used as a framework for understanding. They showcase the power of reactive architecture well, so they’re a good place to start:

We look forward to more examples that include these and many other reactive technologies:

Next Steps

  • Check out the Overview for a high-level walkthrough of the architecture.
  • Browse the Resources page for reactive web learning materials.
  • Share! The resources and ideas range from introductory to advanced.

Conclusion

This project was born out of experimentation and a desire to help spread knowledge about the sometimes highly-challenging topic of reactive programming and architecture. There’s a backlog of features to add, plus I have about 300 (and growing) resources in a queue to curate before adding them to the site. I was hoping to deliver more before announcing the site but other exciting things have beckoned more of my attention. I will continue to add features and resources to the site, and if you want to help come visit the repo and add an issue. Some of my favorite resources for learning about reactive architecture have already been added so I figured now is a better time than never to announce the site.

Feedback and collaboration is encouraged! Please share this with people that are struggling to understand what it means to work in a reactive system.

The site — https://pentacledev.com

The repo — https://github.com/jsonberry/pentacle

Find me elsewhere as @jsonberry on Twitter and Github

--

--