Thursday, November 26, 2015

How-to: develop a node module - part 1

In this course we've learned from day one, how to install node modules and use them in an app. A subject that might be of interest that this course does not bring up is, how does a node module work and how does one go on making one?

A node module is not really different from any component och "class" you make in an regular app. More or less any part of isolated code could be turned into a node module. What might slip one's mind is that whenever the require or import(depending on javascript version) is used, a module is imported for usage. A local one made by one self or a node module made by someone else there is not a big difference in how they're used or accessed.

So let's make a node_module!

I will presume the readers are familiar with git and starting new projects, also that node and npm is installed on the system. Therefore some of the following instructions are not in detail.
Also this will be written in classic javascript style(no TypeScript or ES2015), not that it makes a huge difference but still, now I've said it.
So now then:

In order to do this first step is to register an account at npmjs.com. The account is required for you to publish the module and making it available for everyone through "npm install"-command or the "package.json"-file.

Create a new git repository, I named mine npm-module-test for the sake of this article. Check the box for a readme-file if you want one. Then select "Node" from the gitignore-list at the bottom, this will just fill your gitignore-file with some standard ignore paths common for node projects.

Next, clone the repo to your work-environment and through the terminal/console(will call it terminal from now on) go to the folder where the repo was cloned. Now we can get started.

In the terminal simply type the command:
npm init

There will be a few questions to answer here about the project: its name, version, author etc. There are default settings here so one could complete this step by just pressing return through the entire setup. This will create a package.json-file with the information supplied in the setup. This file can of course be edited so nothing in there is final.

Take a look at the package.json file, there are two important fields in there. The first one is "name", this is the name of your module and this is the name that will be published in npm and used when installing the module. It is a good idea to only use lower case letters and dash to name your module.
For example "my-awsome-module".

The second is the field "main" that will have the value "index.js" if nothing else what chosen during the setup. This one is important because this is the file that will be run when someone uses the module, the entry file, the start file of the module. It's considered a good practice to put the source code in a separate folder from the root, normally named "src" so, create a folder in the root named "src", in that folder create a file named index.js. Now, in the config.json, change the value of "main" to:
{
    ...
    "main": "src/index.js"
    ...
}
Now we've redirect the entry point of the module to a more suitable location.

In this guide the module wont do anything useful at all, because that is not what it is about. So let's add some useless code to the module!

var UselessThing = function(){
    console.log('I am not that useful');
};
module.exports = UselessThing;

Save it and out module is done!

Now lets publish it on npm.
First we have to login to npm in the console using the command:
npm login

You will be asked to enter your username, password and then email

Using this command you can check your local settings to ensure your credentials was stored:
npm config ls

Now run this command to publish the module to npm:
npm publish

And it's done!
Well done! Your useless module is now public on npm and can be used by anyone! To take a look at it go to: http://npmjs.com/package/<package>
where <package> is the name of the module.

If you for any reason would want the code it's here:
https://github.com/afrxx09/npm-module-test
And the published version of the useless module can be found here:
https://www.npmjs.com/package/npm-useless-module-test

it can be installed by running:
npm install npm-useless-module-test

or added to your package json
"dependencies": {
    "npm-useless-module-test": "^1.0.0"
}

Friday, November 20, 2015

Project implementation start

So the project in RIA-development course started this week. As per usual when it comes to projects the hardest part is always figuring out what the H to do. Coming up with a relevant, useful, interesting and meaningful application, that intrigues one to actually accomplish something and to learn instead of just turning in something mediocre that is sufficient to pass the course. This is becomes even more difficult when trying out a new language where one does not have a clue of best practices, structures, tools and development processes.

Now then, some self pity is out of the way, I managed to come up with an idea that I thought would be pretty useful and solid. Making a navigation component that runs with react router. A component that would allow one to simply include the component into ones app that uses React Router and it would generate and render navigation automatically with React Router Links and everything.

At first the idea was to use a json-config-file where one could write down a spec for the routing AND navigation and the component would do everything. Trying this out with a small example app I realized that actually implementing the navigation into apps would be hard. I changed approach to check if My component instead could read all the routes set up by the user and use that to render a navigation. That seems to work much better and it also gives the developer much more freedom when creating their apps.

So there it is, the application I'll be making for this project is a navigation component.

To make it a little more interesting I've started looking into how I can make it into a Node module, because that would be the best way to make is accessible for others to use. Making it as a module makes the process quite different from simply making an application that is running by it self. This weekend or maybe next week, I'll write a blog post explaining the process of developing a module, I need to get a little bit more comfortable and confident my self first.

Friday, November 13, 2015

Mostly idle, but one guild bugfix

I've been pretty idle this week. Got so much done last week where I focused almost entirely on this course, essentially did this weeks work then. My React-Redux-example got some attention, mentioned in two other blogs and cloned 7 times, pretty decent traffic. Hope it has been useful.

David rewrote the code to ES2015 so we created a branch for that so the example now existst in two different styles of javascript. A third version written in TypeScript by Sherief is also on it's way.

Check out Davids ES2015 example code here:
To use it your self, clone the repo
git clone https://github.com/afridlund85/React-Redux-example.git
and change branch:
git checkout -b es2015

A bug in the guild was discoverd. When a member added a Pull Request and that was to a repo that was not by a guild member it caused the guild page to crash when looking at that members profile. Also it could not render Pull Requests properly on the "Deeds" page.

My contribution is in this Pull Request:

Wednesday, November 4, 2015

Simple React Redux example

As a newbie when it comes to Rreact, React Router and React Redux; I found it very hard to get started, even though I have several years of experience in programming. The flow of the applications is hard to follow when using Redux and figuring out how the different parts communicate was not easy. Most tutorials and examples had (in my opinion) too many dependencies  and used a lot of "magic" that did not make sense for a beginner.

I found this fantastic guide that helped me a lot: https://github.com/happypoulp/redux-tutorial.
It describes, in the most minimalistic and simple way; each part of the application flow and the purpose of everything. After reading this and using the example snippets to get redux running(With running I mean without actually doing or rendering anything, but simply not throwing errors in my face), it was much easier to continue.

Using the demo app from the course(https://github.com/krawaller/riastart2015) as inspiration what a "complete" application is. I managed to scrape together a small example where (I hope) there is nothing unnecessary to create confusion.

There are two components called "wrap" and "nav", their purpose is simply to render a container for everything with navigation. Also, there is a "static" component that only renders "Hello world".

The component called "Count" is the tricky one that I tried to make simple. It has two buttons that can increase or decrease a value and it uses redux and the applications state to accomplish this.

Try out the demo:
http://afridlund85.github.io/React-Redux-example/

Check out the code:
https://github.com/afridlund85/React-Redux-example

Monday, November 2, 2015

whois

Hello (world).
I'm Andreas, 30 years old from Växjö. Prior to this education I worked as a webdeveloper, making a CMS with PHP and javascript. When I was sure that programming is what I wanted to do, I took a few years off to get a degree and that is why I'm here.

My main languages that I'm most comfortable with are PHP and javascript, but  many more have been explored and tried in various degrees: C#, C++, ruby and java.

I'm currently using Ubuntu as my OS where sublime is my go-to editor. I like it neat, clean and minimalistic.