End goal: display data using ReactJS compontent Grilldle

Deploying some front-end tooling.

Starting by checking the documentation on Griddle.

Griddle is a simple grid Component for use with React. It depends on Lodash Modules and React.

To use Griddle:

npm install griddle-react

Running a variation in this Jupyter notebook.



In [1]:

    
!npm install --save griddle-react









    



+ npm install --save griddle-react






    



grilled_flpd_data@1.0.0 /home/dmmmd/Dropbox/Wyncode-Academy/web-presence/zipped-code/content/posts/python-mongodb/grilled_flpd_data
├─┬ griddle-react@0.6.1 
│ └── lodash@4.15.0 
└── UNMET PEER DEPENDENCY react@^0.14.3 || ^15.0.1







    



npm WARN griddle-react@0.6.1 requires a peer of react@^0.14.3 || ^15.0.1 but none was installed.



In [2]:

    
!npm install --save react









    



+ npm install --save react






    



grilled_flpd_data@1.0.0 /home/dmmmd/Dropbox/Wyncode-Academy/web-presence/zipped-code/content/posts/python-mongodb/grilled_flpd_data
└─┬ react@15.3.1 
  ├─┬ fbjs@0.8.4 
  │ ├── core-js@1.2.7 
  │ ├── immutable@3.8.1 
  │ ├─┬ isomorphic-fetch@2.2.1 
  │ │ ├─┬ node-fetch@1.6.1 
  │ │ │ ├─┬ encoding@0.1.12 
  │ │ │ │ └── iconv-lite@0.4.13 
  │ │ │ └── is-stream@1.1.0 
  │ │ └── whatwg-fetch@1.0.0 
  │ ├─┬ promise@7.1.1 
  │ │ └── asap@2.0.4 
  │ └── ua-parser-js@0.7.10 
  ├─┬ loose-envify@1.2.0 
  │ └── js-tokens@1.0.3 
  └── object-assign@4.1.0



In [3]:

    
!npm install --save lodash









    



+ npm install --save lodash






    



grilled_flpd_data@1.0.0 /home/dmmmd/Dropbox/Wyncode-Academy/web-presence/zipped-code/content/posts/python-mongodb/grilled_flpd_data
└── lodash@4.15.0

Trying it out in this Jupyter notebook.



In [4]:

    
var React = require('react');
var Griddle = require('griddle-react');

At the most basic level, using Griddle is as simple as wiring up an array of JSON objects as a property to the component. First off, include Underscore and React. Include Griddle and the stylesheet before your React Code.

Please take a look at a basic gulp example…

Use curl to get the gulp.js file…



In [7]:

    
!curl -O https://raw.githubusercontent.com/ryanlanciaux/griddle-gulp-test/master/gulpfile.js









    



+ curl -O https://raw.githubusercontent.com/ryanlanciaux/griddle-gulp-test/master/gulpfile.js
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   404  100   404    0     0  36657      0 --:--:-- --:--:-- --:--:-- 40400



In [9]:

    
!cat gulpfile.js









    



var gulp = require('gulp');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');

gulp.task('browserify', function(){
	gulp.src('scripts/testComponent.js')
	.pipe(browserify({transform: 'reactify'}))
	.pipe(concat('main.js'))
	.pipe(gulp.dest('build'));
});

gulp.task('default', ['browserify'])

gulp.task('watch', function(){
	gulp.watch('scripts/**/*.*', ['default']);
});





    



+ cat gulpfile.js

Install the requirements from gulpfile.js

npm install --save gulp gulp-browserify gulp-concat

Output too long to display.



In [20]:

    
!gulp









    



+ gulp






    



[23:44:54] Using gulpfile ~/Dropbox/Wyncode-Academy/web-presence/zipped-code/content/posts/python-mongodb/grilled_flpd_data/gulpfile.js
[23:44:54] Starting 'browserify'...
[23:44:54] Finished 'browserify' after 16 ms
[23:44:54] Starting 'default'...
[23:44:54] Finished 'default' after 15 μs

And now there is a build/main.js file.

When a server is run in a cloned directory of griddle-gulp-test, I see the expected result.

When a server is run in a directory of files I am currently creating, an exception is thrown.

Test for differences in key files.



In [26]:

    
!diff gulpfile.js griddle-gulp-test/gulpfile.js









    



+ diff gulpfile.js griddle-gulp-test/gulpfile.js



In [31]:

    
!diff index.html griddle-gulp-test/index.html









    



+ diff index.html griddle-gulp-test/index.html

After replacing the dependencies attributes of package.json with these lines from the example test, deleting the ./node_modules directory, and running npm install the example I wrote works as expected. Somewhere some packages were not compatible with each other.

Question: Is it possible to wire up some data from the MongoDB database?

To test, I added some code to the source *.js file:

const MongoClient = require('mongodb').MongoClient,
      assert = require('assert'),
      // Connection URL
      url = 'mongodb://localhost:27017/app',
      message = "Connected successfully to MongoDB server.";
// Use connect method to connect to the server
MongoClient.connect(url, function(err, db){
   assert.equal(null, err);
   console.log(message);
   db.close();
});

ran gulp to add the code to ./build/main.js

And discovered that currently using mongodb inside the browser is not supported.

Answer: No. That is not the way to get MongoDB data into Griddle

And now that I give this some closer thought, it makes perfect sense. How could a browser have access to a MongoDB instance on localhost when a client browser is unlikely to be local?! It's a different context. It becomes more apparent a need for an object data manager. Though from the response to the issue filed here it might be possible in the future.

Looks like the answer is to build a REST API for the data. ~~And that would be the topic for another notebook.~~

And that is a topic for another notebook.

Developing a REST API enables us to create a foundation upon which we can build all other applications. As previously mentioned, these applications may be web-based or designed for specific platforms, such as Android or iOS.

…continued from part 01

End goal: display data using ReactJS compontent Grilldle

Deploying some front-end tooling.

Question: Is it possible to wire up some data from the MongoDB database?

Answer: No. That is not the way to get MongoDB data into Griddle