Stencil with React

Johnny Estilles

Regional Director of Engineering
Freelancer.com

johnny@freelancer.com

@JohnnyEstilles

We need you!

Software Engineers

Web QA

Senior Product Manager

Senior Network Engineer

Senior Technical Recruiter

Site Reliability Engineer

Designer

Based on a true story ...

https://logrocket.com/blog/history-of-frontend-frameworks/

Tim Berners-Lee at CERN

jQuery Plugins

(function( $ ) {
 
    $.fn.showLinkLocation = function() {
 
        this.filter( "a" ).each(function() {
            var link = $( this );
            link.append( " (" + link.attr( "href" ) + ")" );
        });
 
        return this;
 
    };
 
}( jQuery ));
 
// Usage example:
$( "a" ).showLinkLocation();

Some years later ...

AngularJS Directives

angular.module('directivesModule').directive('myDirective', function () {
    return {
        template: 'Name: {{customer.name}}<br /> Street: {{customer.street}}'
    };
});

ReactJS Components

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Vue.js Components

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Fast forward to today ...

At Freelancer.com ...

https://www.freelancer.com

https://www.freelancer.com

https://www.escrow.com

https://www.escrow.com

https://www.freightlancer.com

https://www.freightlancer.com

https://www.startcom.com

https://www.startcom.com

So, what now?

Stencil Documentation 

Stencil Resources 

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-component',
})
export class MyComponent {

  // Indicate that name should be a public property on the component
  @Prop() name: string;

  render() {
    return (
      <p>
        My name is {this.name}
      </p>
    );
  }
}

Stencil Component

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineMyComponent } from 'my-component/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
defineMyComponent(window);

Stencil - Angular Integration

import { Component } from '@angular/core';

import 'my-component';

@Component({
    selector: 'app-home',
    template: `<my-component name="Johnny"></test-components>`
})
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { defineMyComponent } from 'my-component/loader';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

defineMyComponent(window);

Stencil - React Integration

import React from 'react';

function SomeComponent
  return (
    <my-component name="Johnny"></my-component>
  )
}

Resources

The End!

StencilJS vs ReactJS

By Johnny Estilles

StencilJS vs ReactJS

What is StencilJS and how it differs from ReactJS

  • 840