Unidirectional data flow example with Web Components, redux toolkit and lit-html

Code walk-through an example of the "unidirectional data flow" shipping with the BCE Web Component quickstarter: (https://github.com/AdamBien/bce.design):

NEW: "Lightning" airhacks.io video course: "From redux to redux toolkit"

In the "lightning" video course: "From redux to redux toolkit", I'm deleting a significant portion of JavaScript "plumbing" by migrating the "events" application, created in the Apps with Web Components, redux and lit-html video course, from plain redux to redux toolkit.

It is a continuous (~23 commits) refactoring workshop.

Also checkout the BCE.design template, and Java / web-related airhacks.io video courses.

Web Components, BCE, lit-html, redux toolkit, vaadin router quickstarter is available

Minimal magic, minimal tooling, essential dependencies, uni-directional data flow, BCE-structure, high productivity, no transpilations and no migrations:

the Web Component with lit-html, redux toolkit and (optional) vaadin router web component quickstarter is available: https://github.com/AdamBien/bce.design

Watch the installation (2 mins):

Redux Toolkit, JPA via REST, Micrometer, MicroProfile, Obfuscation, JPackage, CDI, JWT--or 85th airhacks.tv

The 85th airhacks.tv covering:

Redux Toolkit migrations, JPA Entities via REST, Micrometer vs. MicroProfile Metrics, obfuscation, decompilation, jpackage, CDI injection and default scope, DTO and projections, HTML rendering with JAX-RS, static assets delivery, role-dependent content delivery, JWT and SSO

is available:

See you every first Monday of the month at https://airhacks.tv 8pm CET (UTC+1:00). Show is also announced at: meetup.com/airhacks.

Any questions left? Ask now: https://gist.github.com/AdamBien/165d26f83101c599fda4b8b46fc54828 and get the answers at the next airhacks.tv.

How EJBGen, TestNG and ...Android happened--an airhacks.fm podcast

Subscribe to airhacks.fm podcast via: spotify| iTunes| RSS

The #134 airhacks.fm episode with Cedric Beust (@cbeust) about:
early Java days, WebLogic, EJBGen, XDoclet, TestNG, Android and SSO
is available for

Redux Toolkit, JPA Entities via REST, Micrometer vs. MicroProfile, Obfuscation and Decompilation, JAX-RS, HTML, Roles and JS--or 85th airhacks.tv

Topics and questions for the 85th airhacks.tv:

  1. NEW: lightning workshop: From redux to redux toolkit
  2. Exposing JPA entities via REST
  3. Micrometer Metrics vs. MicroProfile Metrics
  4. Java apps, obfuscation and decompilation
  5. Is shipping frontends in a WAR a good idea?
  6. Injected classes without annotation
  7. Using JAX-RS to render HTML content--possible use cases
  8. Java EE, Jakarta EE and MicroProfile popularity
  9. Role-based content delivery
  10. Resources to learn Java EE

Any questions left? Ask now: https://gist.github.com/AdamBien/f103d96f28fcab342199d7e506f1516b and get the answers at the next airhacks.tv.

Ask questions during the show via twitter mentioning me: https://twitter.com/AdamBien (@AdamBien),using the hashtag: #airhacks or built-in chat at: airhacks.tv. You can join the Q&A session live each first Monday of month, 8 P.M at airhacks.tv

"Uncaught ReferenceError: process is not defined" and the solution

The Uncaught ReferenceError: process is not defined happens when when a non-existent (here: process) variable is referenced.

Most likely the problematic code snippet looks like:


var isProduction = process.env.NODE_ENV === 'production';    

The process.env property is available on node, but not in the browser which causes the above error.

To fix the problem, define the variable pro-actively before the library is loaded, e.g.:


window.process = {
    env: {
        NODE_ENV: 'development'
    }
}    

The fix/script can be loaded with e.g.:

<script src="init.js"></script>

How lit-html happened--an airhacks.fm podcast

Subscribe to airhacks.fm podcast via: spotify| iTunes| RSS

The #133 airhacks.fm episode with Justin Fagnani (@justinfagnani)) about:
early Java projects, JavaScript, Polymer, web frameworks at Google, Web Components, lit-html and the relevance of JavaScript frameworks
is available for

Web Components / JavaScript: Sorting Rows by Date

Improving the usability of the Web Component-based event application by sorting rows by date in a table rendered with lit-html and data provided by redux.

A free bonus-video from the "Web Components, lit-html and redux" video course:

Web Components: Pre-filling Form Fields and Usability Improvements

I'm (hopefully) improving usability of the Web Component-based event application by several refactoring steps including pre-filling fields and layout changes.

A free bonus-video from the "Web Components, lit-html and redux" video course:

Online Workshops
...the last 150 posts
...the last 10 comments
License