Broadening implementation options of a .NET platform by adding a JavaScript SDK

A presentation at Microsoft Build in in Seattle, WA, USA by Anastasiya Flynn

Agenda

Agenda

Our (Microsoft) story

Our (Microsoft) story

Sitecore

Sitecore

A website page is a hierarchy of UI components

A website page is a hierarchy of UI components

Editing pages

Editing pages

Editing pages

Editing pages

What does this mean for application architecture?

What does this mean for application architecture?

MVC Workflow

MVC Workflow

Why did we want to -change- evolve?

Why did we want to -change- evolve?

Front-end framework benefits

Front-end framework benefits

So what's the issue?

So what's the issue?

The challenge with front-end frameworks

The challenge with front-end frameworks

Component composition

Component composition

JavaScript Services (JSS) to the rescue!

JavaScript Services (JSS) to the rescue!

Three-year journey (and counting)

Three-year journey (and counting)

Initial idea

Initial idea

Placeholders in React components

Placeholders in React components

Architecture (editor mode)

Architecture (editor mode)

What if...

What if...

Disconnected development

Disconnected development

Disconnected development

Disconnected development

Sample App

Sample App

JS controls data layer

JS controls data layer

Architecture (editor mode)

Architecture (editor mode)

Architecture (end-user mode)

Architecture (end-user mode)

Tech preview - Go beyond React

Tech preview - Go beyond React

Command Line Interface

Command Line Interface

Command Line Interface - Used Yargs

Command Line Interface - Used Yargs

Starter Kits

Starter Kits

Automated e2e test suite

Automated e2e test suite

GraphQL

GraphQL

GraphQL Example

GraphQL Example

Monorepo

Monorepo

Monorepo powered by lerna.js

Monorepo powered by lerna.js

Monorepo powered by lerna.js

Monorepo powered by lerna.js

TypeScript

TypeScript

Documentation – make it searchable

Documentation – make it searchable

Summary

Summary

Overhead of supporting multiple frameworks

Overhead of supporting multiple frameworks

Focus on developer experience

Focus on developer experience

Focus on developer experience

Focus on developer experience

Want to learn more about our SDK?

Want to learn more about our SDK?

For years, we have been a Microsoft-first company. Our web experience platform runs on Windows, our developers are .NET developers, and our customers implement custom web experiences using MVC.

With the rise in popularity and capabilities of front-end JavaScript frameworks, we saw an opportunity to give our customers more implementation and UX options. But we faced a challenge -we needed to build a JavaScript API for front-end developers who are unfamiliar with our system and ideologies. We wanted to enable them to harness all the features of our platform without being opinionated about framework specifics or forcing them to change how they code.

In this session, I will share the journey of building our JavaScript SDK. Session takeaways:

  • Insights into the architecture decisions that allow our JavaScript layer to control our .NET layer.
  • How we designed an implementation workflow to ensure the best developer experience (DX).
  • What it takes to support multiple front-end frameworks.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Buzz and feedback

Here’s what was said about this presentation on social media.