Art Noir is the digital home of Christian Kahl, a full stack creative marketing punk from Germany. Currently working as a Creative Director at 21TORR, a major digital agency, he contributes to award-winning projects, products and strategies.
Design, strategy and visual brand communication for german languaged hotels & restaurants.
Official site event 11th Behance Portfolio Reviews Belo Horizonte.
In this one-on-one episode of the Versioning Show, David and Tim look at what it means to be a productive software engineer. They discuss the key factors of relevance (keeping focused on what’s important), quality (making sure your code does what it needs to), and time (having the space to code without interruptions), as well as supportive cultures, reviewing code, avoiding (too many) meetings, flipping birds, and La-Z-Boys.
Continue reading %Three Keys to Being a Productive Software Engineer%
Building a modern project requires splitting the logic into front-end and back-end code. The reason behind this move is to promote code re-usability. For example, we may need to build a native mobile application that accesses the back-end API. Or we may be developing a module that will be part of a large modular platform.
The popular way of building a server-side API is to use a library like Express or Restify. These libraries make creating RESTful routes easy. The problem with these libraries is that we will find ourselves writing a TON of REPEATING CODE. We will also need to write code for authorization and other middleware logic.
To escape this dilemma, we can use a framework like Loopback or Feathersjs to help us generate an API.
At the time of writing, Loopback has more GitHub stars and downloads than Feathers. Loopback is a great library for generating RESTful CRUD endpoints in a short period of time. However, it does have a slight learning curve and the documentation is not easy to get along with. It has stringent framework requirements. For example, all models must inherit one of its built-in model class. If you need real-time capabilities in Loopback, be prepared to do some additional coding to make it work.
FeathersJS, on the other hand, is much easier to get started with and has realtime support built-in. Quite recently the Auk version was released (because Feathers is so modular, they use bird names for version names) which introduced a vast number of changes and improvements in a number of areas. According to a post they published on their blog, they are now the 4th most popular real-time web framework. It has excellent documentation and they have covered pretty much any area we can think of on building a real-time API.
What makes Feathers amazing is its simplicity. The entire framework is modular and we only need to install the features we need. Feathers itself is a thin wrapper built on top of express where they've added new features namely services and hooks. Feathers also allows us to effortlessly send and receive data over web sockets.
Before you get started with the tutorial, you'll need to have a solid foundation in the following topics:
On your machine, you will need to have installed recent versions of:
If you have never written a database API in JavaScript before, I would recommend first taking a look at this tutorial on creating RESTful APIs.
We are going to build a CRUD contact manager application using React, Redux, Feathers and MongoDB. You can take a look at the completed project here.
In this tutorial, I'll show you how to build the application from the bottom up. We'll kick-start our project using the create-react-app tool.
# scaffold a new react project
create-react-app react-contact-manager
cd react-contact-manager
# delete unnecessary files
rm src/logo.svg src/App.css
Use your favorite code editor and remove all the content in index.css. Open App.js and rewrite the code like this:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>Contact Manager</h1>
</div>
);
}
}
export default App;
Make sure to run yarn start to ensure the project is running as expected. Check the console tab to ensure that our project is running cleanly with no warnings or errors. If everything is running smoothly, use Ctrl+C to stop the server.
Let's proceed with generating the back-end API for our CRUD project using the feathers-cli tool.
# Install Feathers command-line tool
npm install -g feathers-cli
# Create directory for the back-end code
mkdir backend
cd backend
# Generate a feathers back-end API server
feathers generate app
? Project name | backend
? Description | contacts API server
? What folder should the source files live in? | src
? Which package manager are you using (has to be installed globally)? | Yarn
? What type of API are you making? | REST, Realtime via Socket.io
# Generate RESTful routes for Contact Model
feathers generate service
? What kind of service is it? | Mongoose
? What is the name of the service? | contact
? Which path should the service be registered on? | /contacts
? What is the database connection string? | mongodb://localhost:27017/backend
# Install email field type
yarn add mongoose-type-email
# Install the nodemon package
yarn add nodemon --dev
Open backend/package.json and update the start script to use nodemon so that the API server will restart automatically whenever we make changes.
// backend/package.json
....
"scripts": {
...
"start": "nodemon src/",
...
},
...
Let's open backend/config/default.json. This is where we can configure MongoDB connection parameters and other settings. I've also increased the default paginate value to 50, since in this tutorial we won't write front-end logic to deal with pagination.
{
"host": "localhost",
"port": 3030,
"public": "../public/",
"paginate": {
"default": 50,
"max": 50
},
"mongodb": "mongodb://localhost:27017/backend"
}
Open backend/src/models/contact.model.js and update the code as follows:
// backend/src/models/contact.model.js
require('mongoose-type-email');
module.exports = function (app) {
const mongooseClient = app.get('mongooseClient');
const contact = new mongooseClient.Schema({
name : {
first: {
type: String,
required: [true, 'First Name is required']
},
last: {
type: String,
required: false
}
},
email : {
type: mongooseClient.SchemaTypes.Email,
required: [true, 'Email is required']
},
phone : {
type: String,
required: [true, 'Phone is required'],
validate: {
validator: function(v) {
return /^\+(?:[0-9] ?){6,14}[0-9]$/.test(v);
},
message: '{VALUE} is not a valid international phone number!'
}
},
createdAt: { type: Date, 'default': Date.now },
updatedAt: { type: Date, 'default': Date.now }
});
return mongooseClient.model('contact', contact);
};
In addition to generating the contact service, Feathers has also generated a test case for us. We need to fix the service name first for it to pass:
// backend/test/services/contact.test.js
const assert = require('assert');
const app = require('../../src/app');
describe('\'contact\' service', () => {
it('registered the service', () => {
const service = app.service('contacts'); // change contact to contacts
assert.ok(service, 'Registered the service');
});
});
Open a new terminal and inside the backend directory, execute yarn test. You should have all the tests running successfully. Go ahead and execute yarn start to start the backend server. Once the server has finished starting it should print the line: 'Feathers application started on localhost:3030'.
Launch your browser and access the url: http://localhost:3030/contacts. You should expect to receive the following JSON response:
{"total":0,"limit":50,"skip":0,"data":[]}
Now let's use Postman to confirm all CRUD restful routes are working. You can launch Postman using this button:
If you are new to Postman, check out this tutorial. When you hit the SEND button, you should get your data back as the response along with three additional fields which are _id, createdAt and updatedAt.
Use the following JSON data to make a POST request using Postman. Paste this in the body and set content-type to application/json.
{
"name": {
"first": "Tony",
"last": "Stark"
},
"phone": "+18138683770",
"email": "tony@starkenterprises.com"
}
Let's start by installing the necessary front-end dependencies. We'll use semantic-ui css/semantic-ui react to style our pages and react-router-dom to handle route navigation.
Important: Make sure you are installing outside the backend directory
// Install semantic-ui
yarn add semantic-ui-css semantic-ui-react
// Install react-router
yarn add react-router-dom
Update the project structure by adding the following directories and files:
|-- react-contact-manager
|-- backend
|-- node_modules
|-- public
|-- src
|-- App.js
|-- App.test.js
|-- index.css
|-- index.js
|-- components
| |-- contact-form.js #(new)
| |-- contact-list.js #(new)
|-- pages
|-- contact-form-page.js #(new)
|-- contact-list-page.js #(new)
Let's quickly populate the JS files with some placeholder code.
For the component contact-list.js, we'll write it in this syntax since it will be a purely presentational component.
// src/components/contact-list.js
import React from 'react';
export default function ContactList(){
return (
<div>
<p>No contacts here</p>
</div>
)
}
For the top-level containers, I use pages. Let's provide some code for the contact-list-page.js
// src/pages/contact-list-page.js
import React, { Component} from 'react';
import ContactList from '../components/contact-list';
class ContactListPage extends Component {
render() {
return (
<div>
<h1>List of Contacts</h1>
<ContactList/>
</div>
)
}
}
export default ContactListPage;
For the contact-form component, it needs to be smart, since it is required to manage its own state, specifically form fields. For now, we'll place this placeholder code.
// src/components/contact-form.js
import React, { Component } from 'react';
class ContactForm extends Component {
render() {
return (
<div>
<p>Form under construction</p>
</div>
)
}
}
export default ContactForm;
Populate the contact-form-page with this code:
// src/pages/contact-form-page.js
import React, { Component} from 'react';
import ContactForm from '../components/contact-form';
class ContactFormPage extends Component {
render() {
return (
<div>
<ContactForm/>
</div>
)
}
}
export default ContactFormPage;
Now, let's create the navigation menu and define the routes for our App. App.js is often referred to as the 'layout template' for the Single Page Application.
Continue reading %Build a CRUD App Using React, Redux and FeathersJS%