Skip to content

Instantly share code, notes, and snippets.

Scaffolding on a skyscraper

Photo by Karl Bewick on Unsplash

The case for embeddable Ember

In this post I'm proposing some improvements for Ember in an important, but often overlooked use case: embedding Ember components in non-Ember applications. Ember is great for brand new web applications. But what story do we tell for existing apps that are looking to transition to Ember?

Consider a single page application that started in 2016 that uses React and webpack. There's already support for pulling in ES modules and rolling them into the production bundle. However, the team has heard about the many tooling improvements to Ember and wants to experiment shipping a small component in this existing React app. However, because the app uses a client-side router, there needs to be a mechanism to load the Ember app and render into a div without resorting to an iframe.

Abstract

As Ember apps mature over time, more components and assets are added, which can cause the boot up time to slow down as well - but you can change that! Tools like route-level code splitting with Embroider, precaching with ember-service-worker, automatic lighthouse audits during CI, and more can help ensure your app stays fast! We'll look at debugging tools with an example app, and measure the positive impact of each optimization we talk about.

Details

This is not intended to be a bikeshedding discussion of what performance improvements are best. For instance, most apps won't meaningfully benefit from a 5 KB size reduction overall. The focus is specifically on how to keep your app booting up fast on mobile devices over the life of a project by deferring unnecessary work.

Intended audience will be people already familiar with building Ember apps. To be introduced over the talk:

  • Embroider - route level code splitting
  • Prember - faster first contentful paint / first meaningful paint timings
@dustinsoftware
dustinsoftware / CommentsBox-Redux.jsx
Last active November 19, 2019 11:08
Demo of redux with React.NET
/**
* Copyright (c) 2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
import { Provider, connect } from 'react-redux';
@dustinsoftware
dustinsoftware / Dockerfile
Created January 6, 2020 16:02
run untrusted react code samples in container
FROM node:12
COPY . /app
WORKDIR /app
RUN yarn install
CMD exec /bin/bash -c "trap : TERM INT; sleep infinity & wait"
/* eslint-disable */
const fs = require('fs');
const path = require('path');
const glob = require('glob');
function createManifest(options = { assetPath: '', assetKeys: [] }) {
let assetManifest = { script: [], link: [], appVersion: '0.0.1' };
for (let file of options.assetKeys.flatMap(assetKey => glob.sync(`${options.assetPath}${assetKey}*`))) {
let basename = path.basename(file);
@dustinsoftware
dustinsoftware / check-binding-redirects.ps1
Last active October 2, 2020 17:30
Asserts valid binding redirects
param($validateBindingsForSolution, $configName, $binPath, [switch] $validateBindings, $addBindingFor)
$ErrorActionPreference = "Stop"
if (!($validateBindingsForSolution -eq $null) -or $validateBindings -or !($addBindingFor -eq $null)) {
# No-op
} else {
throw "One of -validateBindingsForSolution, -validateBindings, or -addBindingFor must be specified"
}
function LoadDllVersions {
@dustinsoftware
dustinsoftware / FindDeletions.ps1
Created September 7, 2022 14:45
FindDeletions
Function FindDeletions($name) {
$matches = Invoke-Expression "git grep -i ""$name"""
if ($matches) {
return
}
$latestMatch = Invoke-Expression "git --no-pager log --format=format:%H -n 1 -i -S ""$name"""
if ($latestMatch) {
Write-Host "Found deletion: $name at commit $latestMatch"
@dustinsoftware
dustinsoftware / sqlserver.yaml
Created September 7, 2022 14:46
SQL Server on M1 macs using Lima
# limactl start --name=sqlserver ~/Downloads/sqlserver.yaml
arch: "x86_64"
useHostResolver: false
dns:
- 8.8.8.8
- 4.4.4.4
images:

Advanced http logging in Kestrel

(This post is for https://dotnet.christmas/)

.NET can run on Linux now!

This is old news, you might say to yourself. However, when porting apps that were previously running in IIS, you may have been relying on this logging feature:

image

using System.Diagnostics.Tracing;
namespace WebApplication1;
/// <summary>
/// Subscribes to the current request counter as it is updated, once per second.
/// Follows the simple event listener pattern here:
/// https://learn.microsoft.com/en-us/dotnet/core/diagnostics/event-counters
/// </summary>
public class HostingEventSourceListener : EventListener, IHostingEventSourceListener