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