Frontend+ Weekly No.9: MobX 4 Features, iOS Hacks, Distributed Transaction

The best articles, links and news related to Frontend Development, and more, delivered once a week. All reference in this issue are gathered from Medium, Hacker News, Reddit,Twitter, MyBridge, etc.

More Issues can be found in Frontend+ Weekly Repository.

News

• Firefox 59.0 Release: On Firefox for desktop, we’ve improved page load times, added tools to annotate and crop your Firefox Screenshots, and made it easier to arrange your Top Sites on the Firefox Home page. Improve graphics rendering using Off-Main-Thread Painting (OMTP) for Mac users (OMTP for Windows was released in Firefox 58) On Firefox for Android, we’ve added support for sites that stream video using the HLS protocol.

• Let’s Encrypt Announce ACME v2 and Wildcard Certificate Support: We’re pleased to announce that ACMEv2 and wildcard certificate support is live! With today’s new features we’re continuing to break down barriers for HTTPS adoption across the Web by making it even easier for every website to get and manage certificates. ACMEv2 is an updated version of our ACME protocol which has gone through the IETF standards process, taking into account feedback from industry experts and other organizations that might want to use the ACME protocol for certificate issuance and management some day. Wildcard certificates allow you to secure all subdomains of a domain with a single certificate.

• Stack Overflow Developer Survey Results 2018: Over 100,000 developers took the 30-minute survey this past January. DevOps and machine learning are important trends in the software industry today, Developers are overall optimistic about the possibilities that artificial intelligence offers, but are not in agreement about what the dangers of AI are. Python has risen in the ranks of programming languages on our survey, surpassing C# in popularity this year, much like it surpassed PHP last year. For the third year in a row, Rust is the most loved programming language among our respondents, followed close behind by Kotlin.

Tutorial

• MobX 4: Better, simpler, faster, smaller: A new major version of MobX has been released, in this blog post I’m just going to highlight the most compelling new features. Decorators without decorator syntax, Dynamically extend observable objects, await when and flow to further simplify asynchronous processes, onBecome(Un)Observed to automatically fetch data sources, Dedicated production build. Smaller & faster. More links about this can be found in Awesome Links.

• Unblocking Clipboard Access: Over the past few years, browsers have converged on using document.execCommand for clipboard interactions. It’s great to have a single widely-supported way to integrate copy and paste into web apps, but this came at a cost: clipboard access is synchronous, and can only read & write to the DOM. That’s the new Async Clipboard API, the text-focused portion of which we’re shipping in Chrome 66. It’s a replacement for execCommand-based copy & paste that has a well-defined permissions model and doesn’t block the page. More links about this can be found in Awesome Links

• Comparing APK sizes, For apps in Flutter, React Native, Kotlin and Java: There are so many ways to make mobile apps ranging from direct platform specific development. Ever wondered how these libraries and frameworks affect the size of your app? Let’s analyze some apk files for apps written in some of these ways. The apps are very basic, containing just a title at the top and a text at the center of the screen. This will show, for a bare minimum app what these frameworks need to package along with the apk for it to be able to run. More links about this can be found in Awesome Links

Engineering Practices

• How GraphQL Replaces Redux: GraphQL is a server side query language. Redux is a client-side state management library. How could one replace the other? Most of our state management code was concerned with merging and mutating data from discreet REST resources into the right shape for our UI (reducers, selectors, actions etc.). A lot of our most complex state management was trying to manage the asynchronous nature of getting all that data in the right order for a specific route (sagas, middleware, thunks etc.). More links about this can be found in Awesome Links

• Best iOS hacks from Twitter: January & February Edition: Last two months community shared nice debugging tips, advices on improving Xcode performance and smart ways to use functions in Swift. How to improve Xcode performance, A great little tip on how to make your code more readable and understandable, etc. More links about this can be found in Awesome Links

• Loading Third-Party JavaScript: Addy Osmani wrote up the fundamentals of loading third-party JavaScript in a proper guide, including privacy, security and performance problems. Third-party scripts provide a wide range of useful functionality, making the web more dynamic, interactive, and interconnected. In this guide, we’ll walk through how to find and fix issues related to loading third-party JavaScript: performance, privacy, security, unpredictable, unintended consequences, and critical rendering path. More links about this can be found in Awesome Links

Under the hood

• Distributed transactions and why you should care: This article is a great introduction for distributed transactions, it includes the following: The Distributed Data Model, The optimist’s data model and The pessimist’s data model; Atomicity, Multi-Version Concurrency Control and Clock-synchronization across the network; Consistency, Two-Phase Commit Protocol, PAXOS, RAFT; Isolation, Snapshot Isolation, Serializable Isolation, Durability, etc. More links about this can be found in Awesome Links

• A Guided Tour inside a clean architecture code base.: Recently, I released an open-source sample project called MovieNight. In the past couple of weeks, I got lots of questions regarding the application architecture, so I’ve decided to write this blog post. I’ll describe the different components at play and the relationships between them as well as talk about some of the architecture decisions I’ve made along the way. More links about this can be found in Awesome Links

• How JavaScript works: the rendering engine and tips to optimize its performance: When you’re building web apps, however, you don’t just write isolated JavaScript code that runs on its own. The JavaScript you write is interacting with the environment. Understanding this environment, how it works and what it is composed of will allow you to build better apps and be well-prepared for potential issues that might arise once your apps are released into the wild. More links about this can be found in Awesome Links

OpenSource

• Rough.js: Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. More links about this can be found in Awesome Links

• TOAST UI Chart: The TOAST UI Chart is an open source JavaScript library that can be used in legacy browsers including IE8. It is intuitive and easy to apply without any other learning. If you like, you can change the chart in detail using many options and custom themes. More links about this can be found in Awesome Links

• fkill-cli: fkill-cli is a cross-platform fabulous processes killer, it works on macOS, Linux, and Windows. To kill a port, prefix it with a colon. For example: :8080. Run without arguments to use the interactive interface. The process name is case insensitive. More links about this can be found in Awesome Links