Wednesday, December 23, 2015

Server side rendering


What's the point:
  • Code can be shared between server and browser.
  • Getting fast initial page loads (no initial blank page, some .js files not needed, etc).
  • Search-engine-friendly pages (SEO).
  • Old browser support.
A server JavaScript engine like NodeJS is required.

Facebook web dev ecosystem: ReactJS, Flux, Flow and Nuclide

ReactJS
Facebook's framework (Instagram its entirely built with it) for writing view components.
It's not a complete web framework; it doesn't provide: modules, http, model, route support, dependency injection, etc.

It works as follows:
  1. Changes on the the UI performed on a fake DOM (virtual DOM).
  2. In order to render the UI an algorithm identifies the differences between the virtual and real DOM.
  3. Finally the changes are applied to the real DOM in batchs.
The result is that there are less updates (redundant modifications are removed)  and they are usually faster (batch DOM updates are faster than individual DOM updates due to the way browsers work).

The virtual DOM also provides other interesting uses like server-side rendering of views.

The UI is composed with components.Components can be nested in hierarchies (component made of components). Each component is built with pure JavaScript or, more declaratively, with JSX scripts: a mix of XML (HTML with some gotchas) and JavaScript.

The main responsibility of a Component is to translate raw data into HTML. The data is stored in the component as:
  • Props: external interface, immutable from the component. Can be changed from parent components.
  • State (optional): internal state, private and only changed by the component.
Since state increases complexity and reduces predictability, a component without state is preferable. Even though you clearly can't do without state in an interactive app, you should avoid having too many Stateful Components.


The key points when using React are:
  • Rebuilding the UI entirely from the data model each time (not incrementally).
  • Utilizing unidirectional data flow in contrast to the (two way) bindings.
They are enforced in the Flux architecture.

Flux
Facebook's internally used architecture/pattern for building ReactJS applications (MVC alternative).
It's not a framework or even a library (certainly there is small Dispatch library).

Their components are:

  • Actions – helper methods that facilitate passing data to the dispatcher
  • Dispatcher: receives actions and broadcasts payloads to registered callbacks
  • Stores: containers for application state & logic that have callbacks registered to the dispatcher
  • Controller views: React components that grab the state from stores and pass it down via props to child components.

Flow
Static type checker, designed to find type errors in JavaScript programs.

Nuclide
Atom based IDE (Atom plus Facebook custom packages).
  • Web development (ReactJS).
  • Native mobile development on iOS and Android (React Native) including device simulators (fast development cycle!).
  • Server side development (Hack and server side editing).
Tools

  • Browserify or webpack: so each component can be coded in it's own file.

Third party UI widget projects

Atom editor

https://atom.io/
Text/Code editor by GitHub.
  • Open source.
  • Hackable.
  • Built with web technology (see Electron).
  • Active community.
  • JSON format configuration files. 
  • Serious Sublime Text alternative.
Remarkable packages (plugins):
  • autocomplete+: view and insert possible completions in the editor while typing. Bundled  with Atom.
  • atom-ternjs: JS code intelligence for atom with Tern. Adds support for ES5, ES6 (JavaScript 2015), Node.js, jQuery, Angular and more. Extendable via plugins
  • jshint: JS validation in real-time or on save.
  • angularjs: adds syntax highlighting and snippets to AngularJS.
  • atom-typescript: autocomplete, live error analysis, type info, compile on save, tscofig, package and build support, format, ...
  • atom-terminal: open terminal panels inside Atom.
  • remote-edit: browse and edit remote files using FTP and SFTP.
  • minimap: preview of full source code (like the Sublime one).
  • color-picker
  • pigments: display colors in project and files.
  • gulp-control
  • atom-live-server

Tuesday, December 22, 2015

Sunday, December 20, 2015

Reading and writing huge PNG files from Java

The PNGJ library allow reading and writing larger PNG files. ImageIO usually needs much more memory due to the use of intermediate image buffers.

Example:

import ar.com.hjg.pngj.*;

BufferedOutputStream os = new BufferedOutputStream(new FileOutputStream(ifile)); 
try {
  ImageInfo imi = new ImageInfo(mp.wres, mp.hres, 8, false);
  PngWriter pngw = new PngWriter(os, imi);
  pngw.setCompLevel(9); // tuning
  pngw.setFilterType(FilterType.FILTER_PAETH); // tuning
  ImageLineInt line = new ImageLineInt(imi);
  int pixelIndex = 0;
  for (int row = 0; row < imi.rows; row++) {
    for (int col = 0; col < imi.cols; col++) {
      int sample = gb.pixels[pixelIndex++];
      ImageLineHelper.setPixelRGB8(line, col, (sample & 0xFF0000)>>16, (sample & 0xFF00)>>8, (sample & 0xFF));
    }
    pngw.writeRow(line, row);
  }
  pngw.end();
}
finally {
  os.close();
}

Tuesday, December 15, 2015

Unknown WKB type 48

The exception "com.vividsolutions.jts.io.ParseException: Unknown WKB type 48" typically happens when the PostGIS geometry column is read as raw bytes.

It should be cast at the SQL sentence:

  select ST_AsBinary(geom) as geom ... from ...

It can be read as follows:

  WKBReader reader = new WKBReader();
  Geometry geom = reader.read(rs.getBytes("geom"));

Saturday, December 12, 2015

OpenVPN in Docker

Server:

   OpenVPN in a docker container on centos 7 with systemd support

Windows client:



Sunday, December 6, 2015

ESXi processor microcode patching


  1. Download microcode patch from Intel site.
  2. Copy the microcode.dat file to your ESXi box.
  3. Edit /etc/rc.local and add the command to load the microcode on every boot:
    /sbin/vmkmicrocode -f /microcode.dat


See http://www.v-front.de/2013/07/faq-cpu-microcode-updates-and-vmware.html

Enabling SFTP on ESXi

After SSH into the ESXi box using the root account:

cd /sbin 
wget http://thebsdbox.co.uk/wp-content/uploads/2010/08/sftp-server.tar.gz 
tar xzvf sftp-server.tar.gz 
rm sftp-server.tar.gz 

That's it.

Saturday, December 5, 2015

X Frame Buffer Installation on CentOS

Installation:

  sudo yum -y install firefox Xvfb libXfont Xorg

Launch an XWindows Virtual Frame Buffer(XVFB) session on display port 99:

  Xvfb :99 -ac -screen 0 1280x1024x24 &

Tell all XWindows applications in this terminal session to use the new Xvfb display port:

  export DISPLAY=:99

Docker notes

Useful links

Storage:
Dockerfile samples:

Commands

Download a pre-built image:

  docker pull centos

List local images:

  docker images

List running containers:

  docker ps

List all containers:

  docker ps -a

Remove all non running containers:

    docker rm $(docker ps -q -f status=exited)

Remove all containers:

    docker rm $(docker ps -a -q)

Remove all local images:

   docker rmi $(docker images -q)

Commit a local image:

  docker commit -m "Oracle JDK 8"  25e928f29d5e centos71-java8:v1

CentOS Service


  systemctl restart docker.service
  systemctl status docker.service

Wednesday, December 2, 2015

PostGIS notes

SRID 4326

x = longitude
y = latitude
Like JTS.

UPDATE some_table
  SET geom = ST_SetSRID(ST_MakePoint(lon, lat),4326);

INSERT INTO some_table (geom)  VALUES (ST_MakeEnvelope(SW_lon, SW_lat, NE_lon, NE_lat, 4326));

SELECT ST_Extent(geom) as table_extent FROM some_table;

Tuesday, December 1, 2015

OSM2PO notes


PgRouting table generation plug-in

Merging several OSM packages


Example:

rem Convert phase 1 and 2
java -Xmx4g -jar osm2po/osm2po-core-5.0.0-signed.jar cmd=tj prefix=pt tileSize=x,c workDir=tmp map-pkg/portugal-latest.osm.pbf

java -Xmx4g -jar osm2po/osm2po-core-5.0.0-signed.jar cmd=tj prefix=es tileSize=x,c workDir=tmp map-pkg/spain-latest.osm.pbf

rem Merge
java -Xmx4g -jar osm2po/osm2po-core-5.0.0-signed.jar cmd=m prefix=all pt es workDir=tmp
rem Convert phase 3 and 4
java -Xmx4g -jar osm2po/osm2po-core-5.0.0-signed.jar cmd=sp prefix=all workDir=tmp
rem Insert in DB

psql -d osm -h 192.168.1.230 -U postgres -f tmp/all_2po_4pgr.sql



Angular 2: high expectations