As Javascript continues its march to world domination, it’s great to keep up with all of the new tools. However, if you are like me, then some of the build tools can be pretty daunting.

Webpack and Gulp are awesome and really do add a lot of value but I’ve found they can take a long time to setup and configure. So when I heard about Parcel I had to give it a go.

What is Parcel?

Parcel is a web application bundler that promises to be zero configuration and fast.

The zero configuration was the real draw for me. Build times are important in software development, but when you are measuring builds in seconds, the hours/days I’ve lost to other bundlers is more important to me.

Out of the box it supports a lot of the JS/front end world’s big names. SCSS, Typescript, Vue and more are all there.

It even has hot reloading just like create react app.

Setup

Setup is super easy.

Install Parccel globally

npm install -g parcel-bundler

Then run Parcel with your entry point, for example

parcel index.html

Simple.

Build

When it’s time to build your application, you just need the build flag;

parcel build index.html

This will place the built application in a folder called dist at the package.json level. I’ve not seen a way to change that, but I guess that’s the point of a zero configuration system.

The demo

If you are giving Parcel a try, one thing to keep in mind is that the simple example on the homepage doesn’t work out of the box.

I lost a bit of time to this but found a Github issue in the end. The Parcel homepage example is using postcss-modules, but Parcel doesn’t support that out of the box. It looks pretty easy to add, but it seems a strange choice to include it in the first example.

What’s next?

ParcelJS has massively impressed me. With a mountain of frameworks and tools I want to learn, I can see myself leaning on it quite a bit. For example, I really want to put some time in to Typescript and Parcel will mean I can spend more time in Typescript and less on seeting up the project and bundler.

I’ve been meaning to take a look at React Native for a while, but I’ve been pushing it back due to how good web apps are now.

However, the new year is bringing with it the urge to learn and make something new.

What is React Native

React Native is a framework for building native mobile applications using a single codebase. After working with mobile applications and trying to keep both an iOS and Android code base inline, the lure of just having one codebase to maintain is pretty strong.

What is Expo

Expo is a set of tools for helping to create React Native applications. With it being the suggested tool from React Native docs, it seems to be the best way to start and maintain a React Native application.

Not Git Bash!

Setting up the Expo CLI and getting your first application running is super easy. The instructions can be found here.

One piece of advice that had me stumped for a little while though; don’t use git bash! The expo init command doesn’t work with git bash, but it works just fine with cmd.

Testing on a phone

I’m far from an expert but I do have some experience with native Android development. Running your local application on a device feels a lot smoother than I remember Android Studio feeling.

By running ‘npm start’, Expo wil start up and give you a QR code to scan. Scanning this with the Expo client app will download the Javascript for your application.

This is so much quicker and easier than starting up Android Studio, enabling your device for debugging, and connecting physically.

Tunnel not LAN

Expo is really impressive when it comes to testing on a device, scan the QR code and you’re off.

However, it turns out it is not idiot proof. You can choose to access the app through your network or through tunneling. For a while I couldn’t get it to work through the LAN option on my network. But then I remembered that my router has two channels, it helps to have devices on the same network when trying to connect via the network I guess.

React Native Debugger

Another feature that really impressed me were the debugging capabilities.

Initially I assumed it would be easiest to debug the application with some text on screen, but React Native allows you to debug on your computer.

Shake your device to bring up the developer menu and select remote debugging to use the chrome developer tools. For other debugging options check out here.

First thoughts

React Native has massively impressed me. I’ve not gone deep in to it yet, I’ve not had to drop down in native code or anything, but if I needed to make a mobile application this would defintely be my starting point now.

My next big challenge though is to come up with an app idea to make my millions!

It’s been a while since I’ve written a blog post.

I’m not normally one for putting a lot of stock in to the new year. However, this year I’m excited for the year to come and learn new things.

GraphQL, AWS and agile processes are all things I’m aiming to further my knowledge in.

Good luck to everyone for 2019!

While making my latest game I wanted to move a sprite that was attached to another sprite via a hinge joint. However I realised that just moving the position of the original sprite’s transform would make the joint fail.

So here is how I added velocity to the sprite to ensure the hinge joint worked appropriately.

Add the velocity

I set a Vector3 for where I wanted the sprite to move to then set the velocity on my RigidBody to equal the Vector3 multipled by a speed value.

Vector3 movement = new Vector3 (-3, 0.0f, 0.0f);
rigidBody.velocity = movement * speed;

The speed value is a public variable so it can be easily set from the Unity editor.

Stop the velocity

Since adding velocity will be using physics within unity, the RigidBody will keep moving even after you stop adding the velocity.

For my game I didn’t want to rely on drag to stop my RigidBody, I wanted a more instant stopping. As such I had to reset the velocity.

rigidBody.velocity = Vector2.zero;

I usually make games to be released on the Andrid platform and my UI usually involves buttons that have to be held down in order for something to happen. For example, the player character should walk forwards while the move button is held down.

Here is how I achieved this through the event trigger system and public methods on my scripts.

Public methods

Since Unity uses C# as it’s scripting language methods can be marked as public or private. In order for something outside of the script to call a method we have to mark the method as public. We do this like below;

public void DoSomething()
{
}

Using the event trigger system

The way I’ve been moving my sprites in my games may be to move the position of the transform of the sprite by using methods should as MoveTowards. Such methods will want to be called continuously as the button is pressed. In order to achieve this I create a private boolean field in the script, such as;

bool moveForward;

Then in the FixedUpdate method of the script you can check if the bool is true and if it move your player as desired.

void FixedUpdate()
{
  if(moveForward)
  {
    // move player as desired
  }
}

In order to set the moveForward field to true I use the event trigger system to call a public method on the script. So for the Pointer Down event on the Event Trigger component, within the button game object, call;

public void MoveButtonPressed()
{
  moveForward = true;
}

and for the Pointer Up event, call the method to set the boolean to false;

public void MoveButtonReleased()
{
  moveForward = false;
}

Adding the instance of the script

The final point is just a reminder to myself since I often forget.

You need to add an instance of a script that you want to call and not the script itself. For example, you add the game object to the event trigger that your script is attached to, not just the script.