This website uses cookies to ensure you get the best experience on our website. Learn more

DDX for Devs 4 - React JSS and Protobuf


DDX for Devs 4 - React JSS and Protobuf

Ryan digs into how JSS is used to control styling from within a JS library, and explains how we serialize, encode and decode Protobuf data

React Inline Styling with JSS - Talk.JS + Talk.CSS = JSConf.Asia Special!

Speaker: Lin Han

Despite countless debates, inline styling is still loved by many web developers. This talk will focus on a specific library (JSS) that is my favorite among the current offerings. It will demonstrate how I ended up using the library by demonstrating the problems I had with other CSS solutions and how I solved them with JSS.

Presenter's bio

Lin is a web development professional at day and hobbyist at night. He doesn't have many commitments so he has tried many different types of stacks over the years. Now he is deeply in the camp of the React + GraphQL ecosystem.

Event Page:

Produced by Engineers.SG
Recorded by: Huiren Woo

Help us caption & translate this video!


Disha Sule: React with gRPC / React Boston 2019

Disha Sule: React with gRPC

Presented by: Disha Sule – Optimus Ride

The subject explored in this talk is using gRPC-Web with React. gRPC was released by Google a few years back and since then there has been a lot of effort towards getting the industry to consider this as the glue for micro-services communication. It is built on HTTP/2, which provides us with a high-speed communication protocol. The data transferred is in a binary format and, hence, is lighter than JSON/XML payloads. This can make a big difference when latency is an issue. gRPC-Web provides a Javascript library that lets browser clients access a gRPC service. gRPC-Web clients connect to gRPC services via a special gateway proxy: the current version of the library uses Envoy by default, in which gRPC-Web support is built-in. React does not offer official support for gRPC-web yet but it is possible to integrate the two. The presentation talks about gRPC and its integration with React for utilizing the benefits that gRPC offers and circumventing the flaws of HTTP and REST.

Protocol Buffers Crash Course (Explained with Javascript)

Protocol Buffers (Protobuf) is a method of serializing structured data useful for transmitting data over the wire or storing it. in this video I want to build a application with pure JSON and then rebuild the same application using protocol buffers and finally compare compare the results. I will also the pros and cons of Protocol buffers.

* Write an App with JSON 1:30
* ReWrite the App with Protobuf 8:00
* Writing .proto file 8:20
* protoc 14:00
* Using protobuf structures 19:00
* Pros & Cons of Protocol Buffers 28:20

Benefits of ProtoBuff
* Schema
* Binary compact size
* Language neutral

* Have to have structured data (barrier to entry)
* More involved processed for small applications.
* Have to make sure to update compiled boilerplate code (bugs, security vulnerability, etc.)
* hard to use with JSON based application (Javascript/browser)

protoc compiler
protoc --js_out=import_style=commonjs,binary:. employees.proto

npm install google-protobuf

Source Code


protoc download

protocol buffer javascript doc

Guys! after I uploaded the video I learned about flatbuffers which are pretty awesome.. too bad I didn’t give them an honorable mention in the video.

???? Software Architecture Videos

???? Database Engineering Videos

???? Network Engineering Videos

???? Load Balancing and Proxies Videos

???? Postgres Videos


???? Programming Pattern Videos

???? Web Security Videos

???? HTTP Videos

???? Python Videos

???? Javascript Videos

????Discord Server

Support me on PayPal

Become a Patreon

Stay Awesome,

Catching up with JSS - JSS and SXA Integration

In this second episode of our Catching up with JSS series, Anastasiya Flynn (@AnastasiyaFlynn) talks about the new features in 9.2 that allow JSS and SXA to deliver great experiences together.

Colin Ihrig - Getting Started with gRPC and Node.js - nodejsday 2019

gRPC is a language independent framework for making remote procedure calls used by large companies such as Netflix, Docker, Google, and more. gRPC leverages technologies such as HTTP2 and protocol buffers to create efficient network based applications. This talk provides an introduction to basic gRPC concepts, and shows how the framework can be used in both browser and Node.js applications. This talk will compare and contrast the various modules available to JavaScript developers, including grpc, @grpc/grpc-js, @grpc/proto-loader, grpc-server-js, and grpc-web. Finally, the talk will discuss certain architectural tradeoffs that come with gRPC-based systems.

Keep in touch:

'Sitecore JavaScript Services (JSS) Unwrapped' - Adam Seabridge

Sitecore MVP Adam Seabridge delivers in-depth content on JSS

The Sitecore Sessions 19/4/18

Follow Adam on twitter: @billyjava

Visit Adam's blog / website:

[VDZ19] Frontend Monoliths: Run if you can! by Jonas Bandi and Daniel Wiehl

The frontend monoliths are here! They arrived with the trend to build modern single page applications. Frameworks like Angular and React boosted the growth of these monoliths. While we were cultivating micro-services in the backend, a new generation of monoliths conquered the frontend. Nobody saw them coming, but they are here now and we don't know how to get rid of them.

The talk shows how frontend monoliths are characterized and how they come into existence. We are looking at different approaches on how to get rid of frontend monoliths, even though there is no silver bullet or single best practice yet. We will have a look at different forms of the mythical Micro-Frontend.

We will introduce the SCION Workbench Application Platform which is an open source project based on Angular and provides the mechanics for client-side web application integration. Any web application can be integrated. If the site does not interact with the platform, there is no need for adaptation. For a deeper integration, the platform provides a framework-agnostic guest API allowing interaction with the platform and other applications.

Webinar: Mikroserwisy w Node.js - kiedy i jak z nich korzystać

Przez kilkanaście ostatnich miesięcy intensywnie pracowaliśmy w The Software House nad projektami opartymi właśnie na microservices. Poznaliśmy w tym czasie zarówno dobre, jak i złe strony tego podejścia. Teraz chcemy podzielić się z wami jednymi i drugimi. ????

Nasz doświadczony Node.js developer, Mariusz Richtscheid, opowie o tym:
- do jakich projektów architektura mikroserwisowa nadaje się doskonale, a do jakich zupełnie nie
- co najbardziej zaskoczyło nas podczas prac nad aplikacjami wykorzystującymi mikroserwisy
- jakie wzorce architektoniczne i techniki mogą ci się przydać w pracy z mikroserwisami (API gateway, sagas, tracing)
- dlaczego, zamiast tworzyć boilerplate, warto generować kod w oparciu o kontrakty gRPC
- jak zaoszczędzić czas korzystając z monorepo (monolithic repository)
- dlaczego klasyczna piramida testów nie sprawdza się w takim systemie i jak wykorzystać Dockera żeby sobie z tym poradzić