Sia siakaramalegos

Next-level React Workshop: React Router, Redux and more

This is a full-day workshop on intermediate to advanced topics on building real-world ReactJS Web applications. We will start by learning about the core fundamentals of Redux including pure functions, actions, reducers, the store, and subscriptions. Then we will integration Redux into a React app, learning about components vs containers, accessing the store, async actions, middleware, and thunks. Next, we will layer in React Router 4, learning about params, queries, and redirects; prompt before navigation, and scrollToTop.

Time permitting and based on audience preferences, we can learn about using component libraries, styling, forms and validations, and more!

The Future of Front-End Performance

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

The most recent version of the slides for this talk are here on SpeakerDeck (from RWX2018).

You can watch the video from Full Stack Fest in Barcelona here:

Get in the Fast Lane: Measuring React Performance

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Pinterest reduced load times by 40% and saw a 15% increase in sign ups. Starbucks implemented a 2x faster time to interactive resulting in a 65% increase in rewards registrations. AliExpress reduced load by 36% and saw a 10.5% increase in orders.

Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues in React apps using the React Profiler, Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. During this hands-on, full-day workshop, you will learn how to:

Optimize and familiarize yourself with your DevTools environment, including the React Profiler
Understand which metrics matter
Measure the performance of existing applications
Diagnose and prioritize performance problems

	class MyComponent extends Component {
	render() {
	const cards = this.props.data.map(card => (
	<Card card={card} key={card.id} />
	))

	return (
	<div style={contentStyles.root}>
	{cards}
	</div>

	exports.onCreateWebpackConfig = ({ actions, stage }) => {
	// If production JavaScript and CSS build
	if (stage === 'build-javascript') {
	// Turn off source maps
	actions.setWebpackConfig({
	devtool: false,
	})
	}
	};

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Blocking</title>

	<script>
	performance.mark('startAsyncSnippet');
	console.timeStamp('startAsyncSnippet');
	var script = document.createElement('script');

	/* HOW TO USE:

	* Enter your name below in 2 lines, where it says `NAME = `
	* If you have a battery in the Pixl, remove it
	* Add the battery while holding down Pixl's top left button
	* Wait for the bootloader bar to go to the end, and hold down
	even when told to release.
	* Only release when the test fails and it says 'Erasing Saved Code'
	* You now have a 100% blank Pixl.js
	* Click the connect icon in the top left of the IDE

	// Party parrot
	const frames = [
	{
	width: 89,
	height: 64,
	bpp: 1,
	transparent: 0,
	buffer: E.toArrayBuffer(
	atob(
	'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAwAAAAAAAAAAAAgAEAAAAAAAAAAAMAABAAAAAAAAAABAAABAAAAAAAAAAMB/+AgAAAAAAAAAgf//ggAAAAAAAACD///wgAAAAAAAAIf///wgAAAAAAAAh4///xAAAAAAAACHg/w/BAAAAAAAAIfB+AcCAAAAAAAAB+B4AYCAAAAAAABH8HwAQEAAAAAAAAP4HDwwAAAAAAAAI/weLRyIAAAAAAAR/w4fh+IAAAAAABH//w/j8QAAAAAACP//j/H8AAAAAAAEf//H+P4gAAAAAAB//+P8PwAAAAAAAD//8f4fwAAAAAABH//4/w/iAAAAAACP//w/j/EAAAAAAI///h/H+AAAAAAAR///j+P8AAAAAAAH///H8f4AAAAAACP//+Hw/wAAAAAAAf//8Lj/gAAAAAAR///8KH/EAAAAAAD///4cf+IAAAAACH///4Q/8AAAAAAAP///4D/xAAAAAAQP///wH/iAAAAABAf///wf/AAAAAAAI////w/8AAAAAAIw////j/4gAAAAAjx////n/wAAAAACHh//////EAAAAAIfh/////+IAAAAAh/h/////8AAAAACH/h/////xAAAAAMf/h/////iAAAAAR//g/////AAAAABH//gP///8QAAAAEP//wB///4gAAAAQ///4D///xAAAABD///+H///iAAAAEP////////EAAAAQ////////+IAAABD////////+QAAAEP////////8AAAAQ/////////4gAAAj/////////xAAACP/////////iA

	require("FontDennis8").add(Graphics);

	var BTNL = BTN4;
	var BTNR = BTN3;
	var BTNU = BTN1;

	var IMG = {
	rex : [
	// running
	{ width : 20, height : 22, bpp : 1, transparent:0, buffer : E.toArrayBuffer(atob("AB/gA/8AN/AD/wA/8AP/AD4AA/yAfAgfwMP/Dn/Q//wP/8B/+AP/gB/wAP4AB2AAYgAAIAADAP//")) },