Category Archives: javascript

Implementing a Blog Engine using React and Redux

This post relates to the repository non-o.blog on github and this specific tag v.0.5.0.

This Blog Engine is using React to read files (posts, pages…) from a github repo. At this time it is using React as the view engine and Redux as the application state (store). to get the code, simply clone it on your mahine and checkout the tag v0.5.0.
Continue reading Implementing a Blog Engine using React and Redux

React environment with Webpack, Enzyme, Mocha and Karma

This is the first post describing the development of a new Blogging engine using React that I am building for fun. This first post describes the environment setup and add some more information on how to use these frameworks.

The code can be found here : https://github.com/non-o/nono-blog, and this post is mainly targeted to the v0.1.0 tag. so you can clone the repository and then checkout the v0.1.0 tag to follow. (or to get an inital setup for your project)

Continue reading React environment with Webpack, Enzyme, Mocha and Karma

Facebook Flux Pattern implementation in .Net (c#): Startup

(Code on Github : Flux.Net)

These days, I took some time to learn facebook’s React and like everyone, came across their Flux Pattern. if I can resume or take one sentence that seemed to be important is this idea:

Flux is used to have a more predictable system.

When looking at the pattern, and trying their Todo or Chat apps, it is not really clear where the call to the server occurs or at least it’s not yet standardized.(as far as I know).

Flux is stated to be a frontend framework, but wait, why would this pattern be more obvious as a frontend pattern.
Continue reading Facebook Flux Pattern implementation in .Net (c#): Startup

React app development skeleton with webpack and hot reload


This article describes a development stack with React and webpack to develop with your favorite code editor.

Prerequisites

You should have node.js installed on your machine.

the short story:

>git clone https://github.com/CedricDumont/Learn-React.git

...
>cd Learn-React
>npm install
..
>npm link webpack-dev-server --save-dev
>node dev-server

navigate with your browser to : http://localhost:8080/

you should see "hello react" printed
then in an editor (notepad) change the ./src/App.jsx to return something new (“hello world”)
save the file
you should see "hello world" replaced without reloading the page

set a debugger; expression (for chrome) in the code and go to the browser, => you can now debug with the dev tools of chrome for example.
Continue reading React app development skeleton with webpack and hot reload

Compilation and Execution phases of simple Javascript code

Some thoughts on : “Is javascript a compiled language” and disclaimer

If you search wikipedia for the definition of interpreted language (which is what javascript is usually referred to), you’ll come across this definition:

> An interpreted language is a programming language for which most of its implementations execute instructions directly, without previously compiling a program into machine-language instructions. The interpreter executes the program directly, translating each statement into a sequence of one or more subroutines already compiled into machine code

when you write javascript code, you don’t hit *(CRTL+SHIFT+B)* like you would for c#, you just open your browser, target an index.html file with a ref to your whatever.js files and then it gets loaded and “interpreted” right? … or not ?

If you go to the ECMAScript 5.1 specs [1] it states this :

> A web browser provides an ECMAScript host environment for client-side computation including, for instance, objects that represent windows, menus, pop-ups, dialog boxes, text areas, anchors, frames, history, cookies, and input/output.

so the scripting language (web scripting language) allows us to interact with this host environment. so in a sense it is not compiled, but only allow us to interact with some compiled elements, objects….

but wait … when the file is loaded in a browser like Chrome for instance, it seems it is processed some how. and after some googling, the responsible for this is V8. what does V8 do …. you guess it :

> V8 compiles JavaScript to native machine code (IA-32, x86-64, ARM, PowerPC, IBM s390 or MIPS ISAs)before executing it [3]

(it seems Rhino [4] does the same for Mozilla browsers : it compiles javascript code to java Bytecode)

So javascript **compiles** to machine code in a certain way at the end …

**Disclaimer** : I am not a javscript expert, so take this content with caution and if you want to deep dive into javascript, I would recommend you to read Kyle Simpson’s books.


[1] ECMAScript 5.1
[2] interpreted language definition
[3] V8 engine wikipedia
[4] Rhino


Example code

var foo = "bar";

function bar() {
    var foo = "baz";

    function baz(foo) {
        foo = "bam";
        bam = "yay";
    }
    baz(); 
}

bar();
console.log(foo);
console.log(bam);
baz();

Compilation (link) phase

for this compilation phase let's stick to Kyle Simpson's explanation of this phase. This helped me understand a lot about some (common) mistakes and avoid them … let’s start with a “simple” example and apply it’s simple rules.

In the Global scope
Hey global scope, I have a declaration for variable foo.. so the global scope will register it.
Hey global scope, I have a bar() function declaration.. it will be registered in the global scope
now we enter the scope of bar:
Hey scope of bar, I have a declaration for variable foo … so the scope of bar will register it.
Hey scope of bar, I have a baz() function declaration … so the scope of bar will register it
now we enter the scope of baz
Hey scope of baz, I have a declaration for identifier called foo … so the scope of baz will register it.

This ends the compilation phase:

Scope     declaration     value
------    -----------     -----
global    foo             variable
global    bar             function

bar       foo             variable
bar       baz             function

baz       foo             variable

execution phase :

(note fro the reminder : LHS = Left Hand Side and RHS = Right Hand Side)

line 1 : Hey global scope, I have an LHS reference for variable called foo, do you have it ?
=> the global scope has it and give it to perform the assignment.

line 2 to 12 : nothing to execute for now

line 13 : Hey global scope, I have an RHS for variable called bar, do you have it ?
=> yes, and the global scope will return it to the caller. in fact this is a function and giving it the parenthesis, we will execute it.

line 4 : Hey scope of bar, I have an LHS reference for variable called foo, do you have it ?
=> yes and it is returned for assignment.
var foo of local baz scope is shadowing the var foo of global scope

line 6-9: is a declaration

line 10 : Hey scope of bar, I have an RHS reference for variable called baz, do you have it ?
=> yes, here it is, and execution is done through parenthesis. fortunatly, baz is also a function that we can execute

line 7 : Hey scope of baz, I have an LHS reference for variable called foo, do you have it ?
=> yes and it is returned for assignment.

line 8 :
Hey scope of baz, I have an LHS reference for variable called bam, do you have it ?
=> no. => so one level up
Hey scope of bar, I have an LHS reference for variable called bam, do you have it ?
=> no. => so one level up
Hey global scope , I have an LHS reference for variable called bam, do you have it ?
=> no, but I create one for you, here it is, you can make your assignment.

line 14 : Hey global scope, I have an RHS reference for variable called foo, do you have it ?
=> the global scope has it and give it back. => it’s vlue is ‘bar’ (because here we are talking about the variable foo of the global scope, not the one of the bar or baz scope.

line 15 : Hey global scope, I have an RHS reference for variable called bam, do you have it ?
=> the global scope has it and give it back. => it’s vlue is ‘yay’

line 16 : Hey global scope, I have an RHS reference for variable called baz, do you have it ?
=> no => for RHS, it’s not going to create one for me, like it would if it had been a LHS
=> reference error, because there is no Identifier baz (this is true for strict and non strict mode)

Build App with Aurelia in Visual Studio 2015

This is a quick How-To open the Aurelia Skeleton project in Visual Studio 2015. (The bad thing for now CTP6, is that it does not support ES6 syntax).

(UPDATE : Soon after writing this, I cam across this post which you should prefer when wanting to start with Aurelia : post from Scott Allen on Aurelia an Asp.net 5)

First follow these instruction to get up and running with an Aurelia Development environment : Aurelia get started cheat sheet – installation steps

1.Then create a new Project in Visual Studio : An Asp.net Web application

aurelia-1

choose the Empty Template

aurelia-2

2.This project should be created where you extracted the aurelia skeleton project (for me : C:_temp\GitHub\aurelia-playground)

aurelia-3

3.Copy (Cut and Paste) the content of the aurelia skeleton project (C:_temp\GitHub\aurelia-playground\aurelia-skeleton-v-0.12) to the new Asp.net project (C:_temp\GitHub\aurelia-playground\Aurelia.Skeleton)

4.edit the project.json file and change the web root to be the root folder :

    "webroot": ".",

5.Now you can just hit F5 and see chrome starting with the aurelia-skeleton nav project running.

6.or better from the Task Runner Explorer you can start the Task tdd and watch and start coding.

aurelia-4