dustinsoftware / 2017-projects

Every month, I'll post about a new project I'm experimenting with.

⢀⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⣠⣤⣶⣶
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⢰⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⣀⣀⣾⣿⣿⣿⣿
⣿⣿⣿⣿⣿⡏⠉⠛⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿
⣿⣿⣿⣿⣿⣿⠀⠀⠀⠈⠛⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠛⠉⠁⠀⣿
⣿⣿⣿⣿⣿⣿⣧⡀⠀⠀⠀⠀⠙⠿⠿⠿⠻⠿⠿⠟⠿⠛⠉⠀⠀⠀⠀⠀⣸⣿
⣿⣿⣿⣿⣿⣿⣿⣷⣄⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⣴⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⡟⠀⠀⢰⣹⡆⠀⠀⠀⠀⠀⠀⣭⣷⠀⠀⠀⠸⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⠃⠀⠀⠈⠉⠀⠀⠤⠄⠀⠀⠀⠉⠁⠀⠀⠀⠀⢿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⢾⣿⣷⠀⠀⠀⠀⡠⠤⢄⠀⠀⠀⠠⣿⣿⣷⠀⢸⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⡀⠉⠀⠀⠀⠀⠀⢄⠀⢀⠀⠀⠀⠀⠉⠉⠁⠀⠀⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿

2017-projects's Issues

Feb 2017 - Code Splitting with Webpack + React.NET

I needed lazy loading for my project but there wasn't any good documentation about how to do this with React.NET.

• Webpack 2 is new, but the idea of code splitting has been around for a while
• Lazy loaded imports are possible using import syntax (Webpack 1 used require.ensure)
• This works, but what happens when you want to use server-rendered Javascript?
• React.NET uses a Javascript engine to parse your components, render them, and then send initial HTML
• This render will break if your components or polyfills (such as dom4) reference window directly, since window doesn't exist on the server
• This is a problem! Code splitting via commons chunk plugin or lazy-loading will generate a statement assigning webpackJsonP to window, which doesn't exist outside the browser.
• Solution: Generate two bundles! Webpack supports this natively.
• Client bundle is configured to use code splitting, the other for server rendering
• Major 🔑: Server bundle must be configured with target: webworker, which will avoid webpack emitting any reference to window
• Profit

Jan 2017 - Your first "native" app with Electron

Electron allows you to write web apps, but also gives you access to native APIs that would be impossible or impractical to use in a browser.

The scope of this project was just to determine how hard it would be to write a simple shell that loads a web app. It wasn't that difficult! Electron has been around for a few years now, and major text editors such as Atom or VS Code use it.

How to get started:

1. Clone a boilerplate repo like this one, then npm install
2. Use a <webview> element to get an iframe that isn't subject to X-Frame-Options or Content-Security-Policy restrictions
3. Run npm start to preview your app.
4. Set your remote to a Github repo that is publicly accessible. Generate a personal access token from Github, set it in an environment variable, and run npm run release to ship a build to the Releases tab in your project.

Congrats! You have shipped your first app.

Some caveats I found:

• You need to sign your app, or you'll get a scary "unsigned app" warning on both OS X and Windows
• The installer is around 30 MB, since you are shipping a build of Chromium with your app
• You have complete control over the system menu. I chose not to customize it for this project beyond the default template.
• Getting auto-updating working isn't trivial. You'll need to implement your own logic to install updates after they are automatically downloaded (some boilerplates ship with handlers for this)

Update Feb 25, 2017 The project is mostly done. Source here: https://github.com/Faithlife/FaithlifeMessages