Loading
August 3, 2017 Feb 2014

821

1028

58

Hiring freelance developers from Upwork or Freelancer

Web App Development by Digital Apps

If you have ever tried to hire freelancers from websites like Freelancer.com or Upwork.com, you already know that it’s not as simple as websites claim. The illusion of simplicity quickly disappears as you notice that there are many developers to choose from and it’s almost impossible to determine their experience level. This is why the majority of projects result taking more time than originally planned, more money than originally budgeted, and staggering 40% of projects fail due to freelancers simply disappearing.

Now, I don’t wish to paint all freelancers with the same brush but this overall trend is alive and well as freelancers sit at one extreme end of the risk-reward scale. They are seemingly very low risk based on their flexibility and low price but are similarly very low reward when averaged out in terms of deliverables.

Because of all of this, there is a massive trend of entrepreneurs and startups working with established design/development firms. Despite the seemingly higher price, you will eventually find this path to be less expensive and less painful in the long run.

This is because of fixed timelines, which fluctuate far less meaning you have a sense of control and able to plan ahead on deliverables. Another crucial benefit is that you will spend less of your personal time, finding, interviewing and chasing a freelancer. Fixed budgets will help you manage your finances rather than extending without any seeming end, and with much more experienced developers the quality of work is often far higher. All this adds up to the established dev shops being a smarter and often more economically (money and time) choice than freelancers.

We see these trends frequently as clients come into our office with half finished or poorly built applications. They are way over their budget because the work just kept dragging on. They are struggling to get their code because they never owned it in the first place. All stung by the wild west freelancers. By providing them senior talent, efficient timelines, fix costs, and the scalability to their application firms can provide, we see them launch their project far faster and save them money.

Read More
February 5, 2017 Feb 2014

821

1028

58

Getting started with React, Node and React Bootstrap

Web App Development by Digital Apps

To begin, lets use express to create an app. Create a directory for your app, open terminal, cd into the directory and run following command:

[code lang=”javascript”]
express react-node –hogan
[/code]

Hogan.js is a compiler for the Moustache templating language.

Switch directory to /react-node

[code lang=”javascript”]
cd react-node
[/code]

and run command to install all the packages

[code lang=”javascript”]
npm install
[/code]

Lets install react by running a command:

[code lang=”javascript”]
npm install react –save
[/code]

Lets install react dom by running a command:

[code lang=”javascript”]
npm install react-dom –save
[/code]

Lets install webpack by running a command:

[code lang=”javascript”]
npm install webpack –save-dev
[/code]

–save vs –save-dev

The –save option instructs NPM to include the package inside of the dependencies section of your package.json.

–save-dev and –save-optional which save the package under devDependencies

NPM install documentation: https://docs.npmjs.com/cli/install

Screenshot 2017-02-05 14.42.57

We also need to install webpack globally, run the following command:

[code lang=”javascript”]
sudo npm install -g webpack
[/code]

Lets install Babel Loader, run the following command:

[code lang=”javascript”]
npm install babel-loader –save-dev
[/code]

Lets install Babel preset for all es2015 plugins:

[code lang=”javascript”]
npm install babel-preset-es2015 –save-dev
[/code]

Lets install Babel Core, run the following command:

[code lang=”javascript”]
npm install babel-core –save-dev
[/code]

Lets install babel preset for react, run the following command:

[code lang=”javascript”]
npm install babel-preset-react –save-dev
[/code]

Setting up the transpiler

Create a new file for our webpack configuration.

[code lang=”javascript”]
touch webpack.config.js
[/code]

Paste the code below into webpack.config.js

[code lang=”javascript”]
var webpack = require("webpack");
var path = require("path");</code>

module.exports = {
entry: {
app: "./public/app/App.js"
},
devtool: ‘#source-map’,
module: {
loaders: {
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: ‘babel-loader’,
query: {
presets: [‘react’, ‘es2015’]
}
}
}
}
[/code]

Create a new directory ‘app’ under ‘public’ and create App.js file

[code lang=”javascript”]
mkdir app
cd app
touch App.js
[/code]

Paste below code into App.js

[code lang=”javascript”]
import React, { Component } from ‘react’
import ReactDOM from ‘react-dom’

class App extends Component {
render() {
return (
<div>This is a REACT test</div>
)
}
}

ReactDOM.render(, document.getElementById(‘app’))
[/code]

Now lets test if everything works. Change the current directory to project root directory and run following command:

[code lang=”javascript”]
nodemon
[/code]

if you dont have nodemon installed, run following command:

[code lang=”javascript”]
npm install -g nodemon
[/code]

Once nodemon is running, visit http://localhost:3000/.

The homepage content is loaded from /views/index.hjs. We need to modify this file to render our React components.

Add this inside the tag:

[code lang=”javascript”]
<div id="app"></div>
[/code]

Add below before the tag:

[code lang=”javascript”]
<script type="text/javascript" src="/build/bundle.js"></script>
[/code]

Next, we need to transpile our code so we can run it in the browser.

[code lang=”javascript”]
webpack -w
[/code]

React Boostrap

To install React Bootstrap, run the following command:

[code lang=”javascript”]
npm install react-bootstrap –save
[/code]

Open index.hjs and add this to your section:
[code lang=”html”]
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
[/code]

Read More