Redux (AtticusFinn) Mac OS

Posted on  by
There are many people out there who purchase Apple’s expensive hardware just to get their hands on macOS. What these people often don’t know is that many Linux distributions look and feel just like macOS but run on any computer. To help you decide if macOS is really the best choice for you, we picked the top 5 best Linux distributions for Mac users in 2020.

What Are the Differences Between macOS and Linux?

  • Redox is a Unix-like microkernel operating system written in the programming language Rust, which has a strong focus on safety, stability, and high performance. Redox aims to be secure, usable, and free. Redox is inspired by prior kernels and operating systems, such as SeL4, MINIX, Plan 9, and BSD.
  • Mac OS X: Some people like the idea of turning their Caps Lock into a search key like on Chrome OS. Weblog Elastic Threads shows us how to do it using a patch for OS X and an application launcher.

Atticus Document Verification.

To start with, Linux is just an operating system kernel, while macOS is a complete operating system that comes bundled with a large number of applications. The kernel at the heart of macOS is called XNU, an acronym for X is Not Unix.

The Linux kernel was developed by Linus Torvalds, and it’s distributed under GPLv2. XNU was originally developed by the American computer and software company NeXT, which was purchased by Apple in 1997. XNU is developed under the Apple Public Source License 2.0, which allows only limited modification of the code by a licensee.

To create complete operating systems (Linux distributions), developers bundle the Linux kernel with third-party open-source applications. This open and flexible approach is one of the biggest strengths of Linux, and it’s also the reason why it can meet the needs of everyone from data centers to home users.

The Linux community has been working tirelessly to support all kinds of hardware, including devices that have been labeled as obsolete by their manufacturers. On the other hand, Apple is actively preventing users from installing macOS on non-Apple hardware, forcing them to purchase expensive Macs.

Apple wants macOS users to install applications only from the App Store, which is inaccessible without a user account. Most Linux distributions that look like macOS come with their own “app stores” packed with free, open-source applications that can be installed with a simple click and without registration.

Top 5 Best macOS Alternatives

Our selection of Linux distributions that look like macOS includes only active projects with a decent number of users. We ranked the distributions according to their similarity with macOS, general usability, and popularity.

1. Elementary OS

Elementary OS presents itself as a privacy-respecting replacement for macOS. It takes just a few minutes to realize that its developers understand what macOS users like about Apple’s operating system. All parts of the Elementary OS—from the familiar bottom dock to individual applications—are designed with ease of use in mind. As a user, you never feel overwhelmed with options because everything just works.

The Pantheon desktop environment, which the developers created from scratch, is arguably the main reason why Elementary OS is so cohesive. In addition to Pantheon, Elementary OS comes with its own heavily curated app store for free and paid applications, called AppCenter. At the moment, there are only 170 applications in the AppCenter, all of which have been reviewed to ensure a native, privacy-respecting, and secure experience.

You can download, install, and use Elementary OS without paying a single dollar, but users are encouraged to make a small donation to support the development of this beautiful and powerful operating system.

2. Deepin Linux

Deepin Linux is based on Debian, and it features its own desktop environment, called the Deepin Desktop Environment (DDE). This desktop environment is written in Qt and is clearly inspired by Apple’s operating system.

The China-based developers of Deepin Linux, Wuhan Deepin Technology Co., Ltd., don’t limit themselves to open-source software. WPS Office, Skype, Google Chrome, and Steam are just a few examples of proprietary applications included in the distribution.

Most basic applications that you would expect to find in any Linux distribution were created by the Deepin development team, and they include Deepin Installer, Deepin File Manager, Deeping System Monitor, and others.

3. Xubuntu

Xubuntu is a derivative of the Ubuntu operating system, one of the most popular Linux distributions in the world. Instead of Ubuntu’s GNOME desktop, it users the Xfce desktop environment, which shares the same basic layout with macOS.

One of the main goals of Xubuntu is to run well on low-end hardware and older computers. If you have, for example, an aging MacBook with a limited amount of RAM, replacing macOS with Xubuntu will allow you to extend its lifespan by a couple of years.

To work well on older hardware, Xubuntu had to sacrifice some features, and the same can be said about Xfce. Even the included applications can, at times, look a little basic and dated, but they get the job done and don’t consume too much resources.

4. Zorin OS

Designed to be easy to use and feature-complete, Zorin OS is an increasingly popular Linux distribution that directly targets users of macOS who would like to break the chain that binds them to Apple’s expensive hardware.

The distribution is available in over 50 languages and comes with many open-source and proprietary applications. Additional applications can be installed from the built-in app store, and Zorin OS even allows its users to install many Windows apps using the Wine compatibility layer.

Only the most basic version of Zorin OS is free. To unlock a macOS desktop layout, you need to pay €39 for the Ultimate version, which also comes with professional installation support and additional apps and games.

5. Voyager Live

Voyager Live is a French Linux distribution that ships with Voyager-branded computers and tablets. It’s based on Ubuntu and includes excellent support for 2-in-1 convertibles (namely the Voyager PC Tablet).

macOS users will appreciate the familiar layout, with a dock at the bottom and a menu bar at the top. Voyager Live makes heavy use of Conky, a popular desktop system monitor capable of displaying all kinds of information directly on the desktop, including network speed, CPU utilization, tasks, and application shortcuts.

If you’re not afraid to try a less popular Linux distribution (whose website hasn’t even been translated into English), then you might be pleasantly surprised by Voyager Live and its polished version of the Xfce desktop environment.

March 22, 2021Benjamin Gowers11 min read

During my first week at Theodo, I had a lot to learn about the main technologies used within the company. I focused my attention on learning to build a simple React Native application using Typescript and Redux.

Quick Links

→ Part 1 - focuses on setting up your environment for react native, typescript and redux, as well as creating stateless components for a Todos app. (you are here!)

→ Part 2 - focuses on integrating redux and adding stateful components to your Todos app.

Table of Contents

Project Source
Introduction
Environment Setup
Technologies
Homebrew
Node Version Manager
Node & NPM
React Native CLI
Text Editor
The Todos App
Creating The App
Installing Icons
Folder Structure
Designing Components
Styling
Stateless Components
Resources

For reference, the source code for this project can be viewed and downloaded here.

During my first week at Theodo, I had a lot to learn about the main technologies used within the company. I focused my attention on learning to build a simple React Native application using Typescript and Redux. This post is aimed at those with a little knowledge of these technologies, guiding you from environment setup, to having a simple working Todos app! I should reiterate that some React, React Native, Typescript and Redux knowledge is assumed. Check out the Resources section for some useful beginner guides!

The bane of a developer’s life is often related to setting up a working environment for your development. I’m going to outline the steps that I took to fully set up my development environment for this little project. I’ll also be writing this from a Mac OS perspective, but with the resources provided, I’m sure Unix/Windows translation won’t be too difficult!

Technologies

Homebrew

I try to install all the technologies that I need into a central location. This makes using homebrew - a very well maintained package manager for Mac OS - a natural choice.

To install, open a terminal and type:

Node Version Manager

Though this isn’t completely necessary, I like to install Node version manager so that I can have multiple easily manageable versions of Node installed on my Mac at once.

To install:

  1. Open a terminal and type brew install nvm
  2. Create NVMs working directory with mkdir ~/.nvm

  3. Open (or create) your ~/.profile (or ~/.zprofile if using zsh instead of bash) and add:

  4. Now every time you log in to your mac, your .profile (or .zprofile) will load NVM and its bash (or zsh) completion. Instead of logging out and logging in, we can invoke this file by running (replace .profile with .zprofile if using zsh) . ~/.profile in your terminal.

Make sure that NVM has been installed properly by typing nvm -v in your terminal.

Note: You can also place this last section in .bashrc (or .zshrc), but .bashrc (or .zshrc) is invoked every time a terminal window is opened. We only need to load NVM once, so we may as well just do it when we login by placing the code in .profile (or .zprofile)!

Node & NPM

We can install Node and NPM using NVM from the last step. Simply run these two commands in a terminal to install and use the latest version of Node (comes with NPM):

  1. nvm install node
  2. nvm use node
  3. Check the installation worked using node -v in a terminal window.

React Native CLI

React Native command-line interface makes it easy to create a new React Native application.

  1. Head over to the React Native setup guide.
  2. Select the ‘React Native CLI Quickstart’ tab.
  3. Do not install Node using homebrew (you should already have it through NVM)!
  4. Install watchman using homebrew.
  5. Follow the ‘Installing dependencies’ steps for both Target OS’s.

Text Editor

You can use whichever text editor you like, but I am using Visual Studio Code, which I highly recommend as it's very customisable!

Here is a list of the extensions that I use:

Many of these are configurable and there are lots of resources online for customisation!

Now that we have all of the necessary technologies installed, let’s make a React Native todos app!

Creating The App

Using the React Native CLI, we can easily create a React Native app from our terminal. Navigate to a directory where you’d like to store the app, then run:

You can replace AwesomeTSProject with whatever project name you like. We are also using the Typescript template for our React Native app.

Note: npx will access the current version of React Native CLI at runtime so that you don’t have to install and manage a global version!

Next, navigate into your project directory and run Metro, a javascript bundler that ships with react native:

Then run your application on iOS (or for android, replace run-ios with run-android):

Redux (atticusfinn) Mac Os Catalina

Note: React Native version 0.63.4 is unable to install the most recent version of a debugging tool called Flipper on iOS. If you are running into errors involving this module, navigate to /ios/Podfile and replace use_flipper! with use_flipper!({ 'Flipper-Folly' => '2.3.0' }). Then delete the Podfile.lock and, in a terminal, navigate to the /ios directory and run pod install. Now it should be fixed!

Mac

Installing Icons

Redux (atticusfinn) Mac Os Download

In order to use icon fonts in a React Native app, they must be installed. I use react-native-vector-icons from NPM.

Android Installation

Go here and follow the recommended installation instructions.

iOS Installation

  1. Open Xcode and open the ProjectName/ios/ProjectName.xcodeproj file.
  2. Follow these (manual) instructions
  3. You may need to run pod install in the ios directory before restarting your application.

Folder Structure

I have created a src directory containing all of the source code for my application. The first step is simply to move App.tsx inside this directory and update the import in index.js.

Each of the remaining folders inside src are as follows:

  • components - all the React components that build up a page live inside this folder (e.g. custom buttons and inputs.
  • config - all the files for configuration live here (e.g. default styles, colours)
  • screens - all the screens for the application live here. They are React components that compose many components from the components directory. (Note: there’s only one screen in this application)
  • store - all things Redux are stored here. Each folder within store denotes a feature. Each feature folder can contain types, actions, selectors and reducers.

I urge you to create these folders now! Don’t worry about the files, we’ll get to those later.

Designing Components

First, I like to think about the smallest components that I’ll need in my application and then build up. We’ll start with a text component.

Although React Native already supplies a Text component, I like to create an AppText component that encapsulates the default styles for my text. This way, we don’t have to repeat any text styling. Simply create a new AppText.tsx file in the components folder and look at the following code.

/src/components/AppText.tsx

Just like in React, we create a functional AppText component, passing in its destructured props. Notice that props are typed using an interface (or type) containing all of the passed props. This interface (or type) is then passed to the generic type of the function component. The children prop comes from the FunctionComponent itself. We can also pass optional styles as a prop when using the AppText component, which has the same type as styles that you'd apply on a React Native Text component.

Styling

Styling a component works by setting its style prop to a style object. This can be inline, but it is good practice to create a stylesheet where each key is a separate style object. The style prop can also be given an array of style objects, where the last style object will take precedence if there are any conflicting rules (much like CSS!).

Any component that can be styled, follows the Flexbox styling routine.

Notice that we are using are defaultStyles.text as the first style for the text component. This is imported from ../config/styles. Let’s go and create that file now.

/src/config/styles.ts

This file simply exports a StyleSheet object, which can be imported anywhere in the app! Notice how it uses the colors module. This is another configuration file which is just an object storing your colour names.

/src/config/colors.ts

Now we can test our component works by navigating to src/App.tsx and replacing the code with the following.

/src/App.tsx

result

Stateless Components

Now that you know the basics of building stateless components, try building these components yourself. Take a look at my source code if you get stuck!

Button.tsx

AppTextInput.tsx

Card.tsx

Before we move on to Redux, it’s worth taking a look at the /src/components/Screen.tsx component. This component encapsulates some logic to ensure that all content in the application is within the safe area of the screen (not underneath the notch). It also adds padding equal to the height of the status bar if we are using Android. We will use this component in the top level of our todos screen in the screens directory.

Now you're ready to move on to looking at integrating Redux into your Todos app, as well as adding some stateful components!

  • React Tutorial - useful for learning React!
  • React Hooks - if you don’t know what react hooks are or how to use them, the official docs are great!
  • React Native Basics - useful for learning React Native!
  • Redux Essentials and Redux with React - both on the redux official docs, great source of information for redux newbies!
  • Typescript in 5 mins! - learn the basics of Typescript!