The latest articles on DEV Community by Haoyuan Liu (@yang991178). https://dev.to/yang991178 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F418802%2F17f1b0cb-a25b-4160-b236-5cb52f335d09.jpeg https://dev.to/yang991178 en Haoyuan Liu Wed, 01 Jul 2020 08:11:36 +0000 https://dev.to/yang991178/fluent-reader-open-source-rss-reader-built-with-electron-react-4cko https://dev.to/yang991178/fluent-reader-open-source-rss-reader-built-with-electron-react-4cko <p>Fluent Reader is a local desktop RSS reader that I have been working on for the past month. It started as a toy project for me to try React after using Vue for years, but has since turned into something quite usable. </p> <p>Website: <a href="https://hyliu.me/fluent-reader/">https://hyliu.me/fluent-reader/</a><br> GitHub: <a href="https://github.com/yang991178/fluent-reader">https://github.com/yang991178/fluent-reader</a><br> Microsoft Store: <a href="https://www.microsoft.com/store/apps/9P71FC94LRH8?cid=devto">https://www.microsoft.com/store/apps/9P71FC94LRH8</a><br> Mac App Store: <a href="https://apps.apple.com/app/id1520907427">https://apps.apple.com/app/id1520907427</a></p> <h2> Features </h2> <ul> <li>A modern UI inspired by Fluent Design System with full dark mode support.</li> <li>Importing from or exporting to OPML files</li> <li>Full application data backup &amp; restoration.</li> <li>Read the full content with the built-in article view or load webpages by default.</li> <li>Search for articles with regular expressions or filter by read status.</li> <li>Hide, mark as read, or star articles automatically as they arrive with regular expression rules.</li> <li>Organize your subscriptions with folder-like groupings.</li> <li>Single-key keyboard shortcuts.</li> </ul> <h2> Development pitfalls </h2> <h3> Electron security </h3> <p>It may be tempting to start developing with <code>nodeIntegration</code> enabled in the renderer process or access functions in the main process with the <code>remote</code> module. This is the first major pitfall I ran into knowing basically nothing about Electron a month ago. Overall, this creates a security blackhole for an app that fetches content from all over the web. In the end I had to rewrote most of those logic using IPC modules and context bridges. This <a href="https://slack.engineering/the-app-sandbox-94178f77e5e3">article from the Slack engineering blog</a> serves as a good introduction to the issue.</p> <h3> Publishing to the stores </h3> <p>Packaging the app into appx bundles and uploading to Microsoft Store all went smoothly with <a href="https://www.electron.build">Electron Builder</a>. (For a side note, Microsoft Store even supports smart update by extracting the ~2MB of compressed JS files out of a ~70MB appx package.) The real hassles came from correctly signing the app for the Mac App Store. Following <a href="https://webspaceteam.com/electron/how-to-publish-an-electron-application-to-mac-app-store">this article</a> should do the trick, although the latest Electron version (v9.0.5) also works.</p> <h2> What's next? </h2> <ul> <li>I may work on integrating the app with RSS services like Feedly and Inoreader. </li> <li>You can help <a href="https://github.com/yang991178/fluent-reader#contribute">internationalize the app into additional languages</a>. </li> <li>For my future projects, <a href="https://microsoft.github.io/react-native-windows/">React Native Windows</a> seems pretty promising as it compiles down to UWP components while providing macOS compatibility. </li> </ul> react electron typescript showdev