Giter Club home page Giter Club logo

nodezoo-web's Introduction

Nodezoo

nodezoo-workshop

A workshop for the nodezoo project. Nodezoo is a search engine for Node.js modules. The nodezoo search engine is an example of a real-world service built using Node.js microservices. Each microservice is published in its own github repository along with all of the necessary config to run the system locally or live . The codebase is intended to be used as an example, and as a starting point for your own projects.

Below we provide a complete workshop to work through. Our current live system has it's roots in this workshop. By working through the iterations below you can get a feel for how a microservice system is bootstrapped together and how the system evolves as needs change.

Note: This repo contains the nodezoo workshop, to explore and run the live version of nodezoo, please see nodezoo-system project.

Microservices

The micro-services that make up the system are:

Each service should be downloaded and placed in the same folder including this repository.

Iterations

The system is built in a set of iterations so that you can follow its development. This mirrors the way that real microservice projects are developed. Each iteration, more services are introduced.

When working with the individual microservices, it is easier to open a separate terminal for each one.

Not all microservices are available in all iterations, as some are only introduced later.

Each iterations contains a set of tasks to execute. You should try to get them all up and running to verify to yourself that you understand the mechanics of the system.

Each iteration also includes a set of experiments that you can attempt. Use these to develop your understanding of the system - there are no right answers!

Requirements

The basic tools are:

Install these before getting started. Later iterations introduce additional tools, and these will be indicated.

A Note on Docker

This example only places microservices into containers. All other services (e.g. redis) are run as normal from the host machine. This does not prevent you from containerising them of course!

To use the docker command in a terminal, you need to set up the docker environment variables. From the initial docker terminal (as provided by the docker installation), you can run

$ docker-machine env default

to obtain these environment settings. Copy and paste them into new terminals as needed.

Docker runs containers in a host machine. You use the IP address of this host to access containers. The easiest way to get this IP address is to run the command:

$ docker-machine ip default

Finally, from inside docker containers, your microservices will need to talk to the outside world. To do this, they use a special IP address representing your host machine (Host IP). You can obtain this address in multiple ways:

  • run ifcongig -a and look for the docker or virtualbox entries.
  • run docker-machine inspect default | grep HostOnly

Docker networking can be tricky, and is fragile with respect to network changes, with DNS, for example, failing. When wierdness happens, your best bet is to restart:

$ docker-machine restart default

This will invalidate your environment, so you will need to launch a new docker terminal.

How to use this code

Each microservice repository has a branch for each iteration: i00, i01, etc. You can clone these branches directly - for example:

$ git clone -b i00 https://github.com/nodezoo/nodezoo-web.git nodezoo-web-i00

However you will not be able to save your changes to your own repositories.

To save your own work, it is better to first fork the repository on github.com, and then

$ git clone https://github.com/[YOUR_USER]/nodezoo-web.git
$ cd nodezoo-web
$ git remote add upstream https://github.com/nodezoo/nodezoo-web.git
$ git fetch upstream
$ git checkout upstream/i00
$ git checkout -b i00

This sequence of commands downloads the branch into your local clone of your fork. You can then push your changes back to your own fork.

One you have downloaded all the branches, you can switch between them, across all microservice repositories using the iteration.sh script:

$ ./iteration.sh i00 # moves all to iteration 00
$ ./iteration.sh i01 # moves all to iteration 01
... etc.

These commands must be used before using the above script, for each branch for the first time :

$ git checkout upstream/[BRANCH NAME]
$ git checkout -b [BRANCH NAME]

Install your dependencies

This script only works once the branch has been fully set-up for a first time.

In each branch, you always need to run the following command:

npm install

Then go into the folder nodezoo-workshop/system and run:

npm install

to get the dependent Node.js modules. This must be done each time a branch is changed for each micro-service.

Run build

In the folder nodezoo-web use the following command :

npm run build

IMPORTANT NOTE: the build command is not required on branch i00 - i05

Iteration 00: Getting Started

Branch name: i00

This branch starts with a simple web server. Use this branch to validate your configuration.

microservices

  • web (stub)

tasks

  • Clone the microservice.
  • Review code.
  • Run in terminal with
    • node srv/app-dev.js --seneca.options.tag=web --seneca.log.all
  • Verify functionality:
    • Observe the seneca logs to follow the execution of action patterns
    • Open http://localhost:8000 - all searches return "foo"
    • Open http://localhost:8000/info/express - all info is for "foo"
    • Use the HTTP API:
      • $ curl "http://localhost:44000/act?role=search&cmd=search&query=express"
    • Use the repl:
      • $ telnet localhost 43000
      • > seneca.list('role:search')
      • > role:search,cmd:search,query:express
  • Docker image and container: build and run
    • Open the Dockerfile in a text editor and the commands to use that Dockerfile are in its comments
    • The command $ docker build -t TAG-NAME . tells docker to build with the tag TAG-NAME using the Dockerfile in the current directory
    • Verify functionality as above, against docker host IP
      • If Docker cannot connect to the Docker daemon during building use the following command before building: $ eval "$(docker-machine env default)"

experiments

  • Learn some hapi: add some more API end points
    • how about /api/ping, and respond with the time?
  • Learn some seneca: add some more actions, and expose them as API end points
    • how about /api/ping triggers role:web,cmd:ping, and that responds with the time
  • The front end is old-school jQuery - how about some react?
  • Setup nginx as a load-balancer with multiple instances of web running
    • update the configuration to handle port conflicts

Iteration 01: 3 Microservices

Branch name: i01

This branch introduces two microservices that support the web service. Both are stubs that perform no actual work, instead returning hard-coded responses. The focus here is on understanding how simple microservice communication is configured using static addressing with fixed IP addresses and ports.

microservices

  • web
  • info (stub)
  • search (stub)

tasks

  • Clone the microservices.
  • Review code for each one - in particular the message transport configuration.
  • Run in separate terminals with
    • node srv/app-dev.js --seneca.options.tag=web --seneca.log.all
    • node srv/info-dev.js --seneca.options.tag=info --seneca.log.all
    • node srv/search-dev.js --seneca.options.tag=search --seneca.log.all
  • Verify functionality:
    • Observe the seneca logs to follow the execution of action patterns
    • Open http://localhost:8000 - all searches return "bar"
    • Open http://localhost:8000/info/express - all info is for "bar"
    • Use the HTTP API:
      • $ curl "http://localhost:44000/act?role=search&cmd=search&query=express"
    • Use the repl of each microservice, and test its action patterns
  • Build and run the Docker containers, and verify the same functionality

experiments

  • Add another microservice
    • ... perhaps ping can live in its own service?
  • How would you unit test this code?
    • testing the inbound and outbound messsages for each action is a good place to start
  • What happens when microservices are down?
    • Perhaps an auto-restarter like forever might help
  • Place the info and/or search microservices behind nginx
    • and run multiple instances of them - scaling!
    • and run multiple versions - fine-grained deployment!
      • a simple change is to return 'zed' instead of 'bar'
  • Seneca lets you merge microservices into one process
    • just seneca.use each microservice inside web

Iteration 02: Real Functionality

Branch name: i02

This branch introduces infrastructure services that are used by the microservices to perform work. Elasticsearch is used as a search engine, and Redis is used for publish/subscribe messaging. The search can now index and search for Node.js modules, with some manual help.

Prerequisites

  • Install redis and run in default configuration
  • Install elasticsearch and run in default configuration
  • Clone the nodezoo repository, and build the nodezoo-level container
    • See folder docker/level; run npm install first
    • This is necessary, as the seneca-level-store module must compile binaries

microservices

  • web
  • info
  • search
  • npm

supporting services

  • redis
  • elasticsearch

tasks

  • Clone the microservices.
  • Review code for each one - in particular the external intergrations.
  • Run in separate terminals with
    • node srv/app-dev.js --seneca.options.tag=web --seneca.log.all
    • node srv/info-dev.js --seneca.options.tag=info --seneca.log.all
    • node srv/search-dev.js --seneca.options.tag=search --seneca.log.all
    • node srv/npm-dev.js --seneca.options.tag=npm --seneca.log.all
  • Verify functionality:
    • Observe the seneca logs to follow the execution of action patterns
    • Open http://localhost:8000/info/request - adds request to the search engine
      • Manually change the module name in the URL to index other modules.
    • Open http://localhost:8000 - searches now work! Try "request".
    • Use the HTTP API:
      • $ curl "http://localhost:44000/act?role=search&cmd=search&query=express"
    • Use the repl of each microservice, and test its action patterns
  • Build and run the Docker containers, and verify the same functionality

experiments

  • Add another info microservice
    • copy npm, and then modify
    • perhaps it would be useful to know something about the author(s) of the module?
  • What happens when microservices are down? and what about redis and elasticsearch?
  • Can you run multiple copies of npm
    • what happens?
  • If you used nginx for scaling, does it still work?
  • Elasticsearch might run slow - is there a way to deal with this?
    • what about a separate caching microservice that sits in front of search?

Iteration 03: Measurement

Branch name: i03

This branch uses influxdb and grafana to chart message flow rates through the system. Influxdb is used due to it's ease of installation and because it is based on plotting time-series data. Grafana is used because it officially supports influx, and is relatively easy to use.

Prerequisites

  • Install influxdb and run in default configuration
    • Start influxdb with $ influxd run
    • Set up your database by running the console $ influx
> CREATE DATABASE seneca_msgstats;
> CREATE USER msgstats WITH PASSWORD 'msgstats';
> GRANT ALL ON seneca_msgstats TO msgstats;
  • Install grafana and run in default configuration
    • You'll need to add your influxdb as data source and setup a dashboard.
    • Action flow rates can be obtained using queries of the form:
      • SELECT SUM(c) FROM "cmd:search,role:search" WHERE time > now() - 100s GROUP BY time(1s)
  • In your clone of the main nodezoo repository, run the msgstats service:
    • located in the system folder
    • npm install first as usual
    • run with HOST=localhost|host-ip node msgstats.js
    • use host-ip for docker scenario
  • You'll need a personal access token for the github.com API
    • See the menu item under account settings on github.com

microservices

  • web (stats)
  • info (stats)
  • search
  • npm
  • github

supporting services

  • redis
  • elasticsearch
  • influxdb
  • grafana
  • msgstats

tasks

  • Clone the microservices.
  • Review code for each one - in particular the message statistics collection.
  • Run in separate terminals with
    • node srv/app-dev.js --seneca.options.tag=web --seneca.log.all
    • node srv/info-dev.js --seneca.options.tag=info --seneca.log.all
    • node srv/search-dev.js --seneca.options.tag=search --seneca.log.all
    • node srv/npm-dev.js --seneca.options.tag=npm --seneca.log.all
    • node srv/github-dev.js --seneca.options.tag=npm --seneca.log.all --seneca.options.plugin.github.token=YOUR_GITHUB_TOKEN
  • Verify functionality:
    • Observe the seneca logs to follow the execution of action patterns
    • Use the website, API and repl as before
  • Verify that message flow rate charts are generated in grafana
  • Build and run the Docker containers, and verify the same functionality

experiments

  • Write a test script to generate queries via HTTP and then observe the charts
    • the message flow rates should remain relatively proportional to each other
  • Write a seneca plugin that induces a failure rate on a given set of messages
    • read the article on priors
    • run this on npm and github - does running more instances of these services help?
  • Can you implement a rate limiter?
    • Use your test script to overload the system
    • Use a plugin to implement the rate limiting
    • It's ok to drop excess load on the floor (aka "load-shedding")

Iteration 04: Enhancement

Branch name: i04

This branch shows the use of a message bus to avoid the high coupling and configuration costs of direct service-to-service communication. This is one way to avoid the need for service discovery solutions.

Prerequisites

  • Install beanstalkd and run in default configuration

microservices

  • web (stats)
  • info (stats)
  • search
  • npm (stats)
  • github
  • update (stats)

supporting services

  • redis
  • elasticsearch
  • influxdb
  • grafana
  • msgstats

tasks

  • Clone the microservices.
  • Review code for each one - in particular the npm update event emitter.
  • Run in separate terminals with
    • node srv/app-dev.js --seneca.options.tag=web --seneca.log.all
    • node srv/info-dev.js --seneca.options.tag=info --seneca.log.all
    • node srv/search-dev.js --seneca.options.tag=search --seneca.log.all
    • node srv/npm-dev.js --seneca.options.tag=npm --seneca.log.all
    • node srv/github-dev.js --seneca.options.tag=npm --seneca.log.all --seneca.options.plugin.github.token=YOUR_GITHUB_TOKEN
    • node srv/update-dev.js --seneca.options.tag=update --seneca.log.all --seneca.options.plugin.npm_update.task=registry_subscribe
  • Verify functionality:
    • Observe the seneca logs to follow the execution of action patterns
    • Use the website, API and repl as before
  • Verify that live npm publishes are registered
  • Verify that message flow rate charts are generated in grafana
  • Build and run the Docker containers, and verify the same functionality

experiments

  • The npm-update microservice also provides download and batch functionality
    • experiment with these (look at the source to see the action patterns)
    • use the repl to control and observe
  • In production, how can you ensure that you have all the npm registry data?
    • which configuration of npm-update instances do you run?
  • A long time ago, in a galaxy far away, the original nodezoo could calculate "node rank", which is just like "page rank" only for node modules.

Iteration 05: Mesh Networking

Branch name: i05

This branch shows the use of mesh networking to completely remove the need for service discovery. The seneca-mesh plugin uses the SWIM gossip algorithm to enable microservices to automatically discover the appropriate destinations for messages dynamically.

Prerequisites

  • In your clone of the main nodezoo repository, run the base-node service:
    • located in the system folder
    • npm install first as usual
    • run with node base-node.js

microservices

  • web
  • info
  • search
  • npm
  • github
  • update

supporting services

  • influxdb
  • grafana
  • msgstats
  • base-node

tasks

  • Clone the microservices.
  • Review code for each one - in particular the updated service scripts in the srv folders.
  • Make sure to run the base-node service before starting the microservices.
  • Run in separate terminals with
    • node srv/app-dev.js --seneca.options.tag=web --seneca.log=type:act --seneca.options.debug.short_logs=true
    • node srv/info-dev.js --seneca.options.tag=info --seneca.log=type:act --seneca.options.debug.short_logs=true
    • node srv/search-dev.js --seneca.options.tag=search --seneca.log=type:act --seneca.options.debug.short_logs=true
    • node srv/npm-dev.js --seneca.options.tag=npm --seneca.log=type:act --seneca.options.debug.short_logs=true
    • node srv/npm-github.js --seneca.options.tag=npm --seneca.log=type:act --seneca.options.debug.short_logs=true --seneca.options.plugin.github.token=YOUR_GITHUB_TOKEN
    • node srv/update-dev.js --seneca.options.tag=update --seneca.log=type:act --seneca.options.debug.short_logs=true --seneca.options.plugin.npm_update.task=registry_subscribe
    • These logging options add a filter to show only actions, and also shorten the logs so they are easier to see for debuggin.
  • Verify functionality:
    • Observe the seneca logs to follow the execution of action patterns
    • Use the website and API as before.
  • Verify that live npm publishes are registered
  • Verify that message flow rate charts are generated in grafana
  • Build and run the Docker containers, and verify the same functionality

experiments

  • Try stopping and starting services at random.
    • Observe how the mesh network dynamically reconfigures the microservice message flows.
  • Try running multiple instances of the search service.
    • Observe that the web service automatically load balances between the current search services dynamically.

Contributing

The NodeZoo org encourages open and safe participation.

If you feel you can help in any way, be it with documentation, examples, extra testing, or new features please get in touch.

License

Copyright (c) 2014-2016, Richard Rodger and other contributors. Licensed under MIT.

nodezoo-web's People

Contributors

adrianrossouw avatar ckiss avatar eduardobs79 avatar georgette avatar matt-oc avatar mcdonnelldean avatar mihaidma avatar mirceaalexandru avatar naomifeehan avatar pelger avatar rjrodger avatar shakywakey avatar shanel262 avatar thefoxis avatar vislamov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nodezoo-web's Issues

should not be using uppercase in filenames

Mac and windows are case __in__sensitive, but linux cares about case deeply.

This is why the following line in client/containers/info.js was only breaking when i was trying to build docker containers with it.

import {TravisInfo} from '../components/TravisInfo'

The filename was components/travisInfo.js, which would work everywhere but on linux.

The node way (tm) to do this is to name the file components/travis-info.js.

Allow user to copy git link to clipboard

If a user wants to copy the git link to clone a repo, it would be convenient to have the standard copy to clipboard feature (like git has when copying git http and ssh links)

Better Flexgrid Wanted

The current grid is tedious when doing responsive layout

What I don't want is to have to do this:

className="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xlg-2"

to get an element to have a width of 2 columns

I want to be able to do this, and have it be 2 columns from an xs screen to the largest

className="col-xs-2"

this is more than just quality of life, but the current implementation is far too many queries than needed

As a note, bootstrap 4 is in alpha but uses flexbox and this design

Create a readme header png or gif

Hey @thefoxis Can you produce a non svg version of the nodezoo logo so we can use it on the README's? You can dump it in the imgs/ folder and I will find a proper home for it.

Github doesn't like SVG's in the readme and using the change header trick sometimes fails on npm so I think a regular graphic will do fine. Pretty much like we do on the seneca ones.

I'll have someone else run through all the readme's with the file.

Only show connected services

In the search result items, in the top left hand corner. There are little service gems. These are supposed to represent the services we have data for. With that in mind each service gem should only show when there is data from that service included in the search result.

To check if a service is available, check the data like so. item.github.connected. This value will be true or false. In cases where there is no connected service item.github.connected will be false and you will know not to read data from it.

The following services are included in the search payload travis, github, npm.

take advantage of more stylus features

This isn't really that important, but for anyone looking to learn a preprocessor language (we use stylus), this might be fun.

using this site as a reference on which css3 properties still require vendor prefixes, I'd like to see some mixins generated

for example, although vendor prefixes is no longer needed for this property

Mixin for border-radius

border-radius(radius)
  -webkit-border-radius radius
  -moz-border-radius radius
  border-radius radius

used by doing:

border-radius(5px)

Also, I'd like see more use of features like @extend, and whatever feels nice. You can get crazy concise with these things, but its not necessary as it all compiles the same :)

Designer Wanted

Because I'm not one. I'm really great at UX, but not making things pretty. Just good enough.

Two different schools of thought :)

No coding required, just send suggested layout in any format you wish.

Move header and footer bits inside the shell

This means we end up with

<div id=app>
 <div className=shell>
  ... Whole site here

I'm not massively happy about this but I need to speak to people with more react experience to fix. For now this will allow @thefoxis to keep the design semantic so we can just pull the two top divs when we figure out the best way to do it.

@ckiss I'll get you to do this for Nodezoo please.

create components for each info result type

There are 3 different types of results (currently) in Info.js: Github, Travis, NPM.

The layout for each type of result can be split into their own component, and then imported and utilized within info.js

github service crashing

Consecutive info queries are causing github service to fail ( I might need to move this issue to another repo)

I tried using only seneca and lodash, and able to get the service to crash by toggling between them in the route

/info/{module_name}

here is a crash report when querying for argosy

route:

/info/argosy

(so searching for argosy)

log:

Seneca Fatal Error
==================

Message: seneca: No matching action pattern found for { data:    { name: 'argosy',     user: 'jasonpincin',     repo: 'argosy',     stars: 3,     watches: 1,     forks: 2,     last: '2016-02-04T16:47:08Z',     url: 'http://github.com/jasonpincin/argosy',     'id$': 'argosy' },  role: 'search',  cmd: 'insert' }, and no default result provided (using a default$ property).

Code: act_not_found

Details: { args: '{ data:    { name: \'argosy\',     user: \'jasonpincin\',     repo: \'argosy\',     stars: 3,     watches: 1,     forks: 2,     last: \'2016-02-04T16:47:08Z\',     url: \'http://github.com/jasonpincin/argosy\',     \'id$\': \'argosy\' },  role: \'search\',  cmd: \'insert\' }' }

Stack:
    at Object.errormaker [as error] (/Users/gege/nearform/nodezoo-system/node_modules/nodezoo-github/node_modules/eraro/eraro.js:94:15)
    at Object.execute_action [as fn] (/Users/gege/nearform/nodezoo-system/node_modules/nodezoo-github/node_modules/seneca/seneca.js:1054:29)
    at Immediate._onImmediate (/Users/gege/nearform/nodezoo-system/node_modules/nodezoo-github/node_modules/seneca/node_modules/gate-executor/gate-executor.js:135:14)
    at processImmediate [as _immediateCallback] (timers.js:383:17)

Instance: Seneca/1.2.0/xdveia4tagum/1459205683772/28075/undefined
  ALL ERRORS FATAL: action called with argument fatal$:true (probably a plugin init error, or using a plugin seneca instance, see senecajs.org/fatal.html)
    at Object.execute_action [as fn] (/Users/gege/nearform/nodezoo-system/node_modules/nodezoo-github/node_modules/seneca/seneca.js:1059:27)

When: 2016-03-28T22:55:18.944Z

Log: [sys,seneca,1.2.0,xdveia4tagum/1459205683772/28075/undefined,act_not_found,seneca: No matching action pattern f

Node:
  { http_parser: '2.5.2', node: '4.4.1', v8: '4.5.103.35', uv: '1.8.0', zlib: '1.2.8', ares: '1.10.1-DEV', icu: '56.1', modules: '46', openssl: '1.0.2g' },
  { debug: false, uv: true, ipv6: true, tls_npn: true, tls_sni: true, tls_ocsp: true, tls: true },
  [ 'Binding contextify', 'Binding natives', 'NativeModule events', 'NativeModule buffer', 'Binding buffer', 'NativeModule internal/util', 'Binding util', 'NativeModule timers', 'Binding timer_wrap', 'NativeModule _linklist', 'NativeModule assert', 'NativeModule util', 'Binding uv', 'NativeModule path', 'NativeModule module', 'NativeModule internal/module', 'NativeModule vm', 'NativeModule fs', 'Binding fs', 'NativeModule constants', 'Binding constants', 'NativeModule stream', 'NativeModule _stream_readable', 'NativeModule _stream_writable', 'NativeModule _stream_duplex', 'NativeModule _stream_transform', 'NativeModule _stream_passthrough', 'Binding fs_event_wrap', 'NativeModule os', 'Binding os', 'NativeModule crypto', 'Binding crypto', 'NativeModule internal/streams/lazy_transform', 'NativeModule string_decoder', 'NativeModule net', 'NativeModule internal/net', 'Binding cares_wrap', 'Binding tty_wrap', 'Binding tcp_wrap', 'Binding pipe_wrap', 'Binding stream_wrap', 'NativeModule dns', 'NativeModule url', 'NativeModule punycode', 'NativeModule querystring', 'NativeModule http', 'NativeModule _http_incoming', 'NativeModule _http_common', 'NativeModule internal/freelist', 'Binding http_parser', 'NativeModule _http_outgoing', 'NativeModule _http_server', 'NativeModule _http_agent', 'NativeModule _http_client', 'NativeModule https', 'NativeModule tls', 'NativeModule _tls_common', 'NativeModule _tls_wrap', 'NativeModule _stream_wrap', 'Binding js_stream', 'Binding tls_wrap', 'NativeModule _tls_legacy', 'NativeModule zlib', 'Binding zlib', 'NativeModule dgram', 'Binding udp_wrap', 'NativeModule console', 'Binding signal_wrap', 'NativeModule repl', 'NativeModule readline', 'NativeModule domain', 'NativeModule tty', 'NativeModule cluster', 'NativeModule child_process', 'Binding spawn_sync', 'NativeModule internal/child_process', 'Binding process_wrap', 'NativeModule internal/socket_list', 'NativeModule internal/cluster' ]

Process:
  pid=28075, arch=x64, platform=darwin,
  path=/Users/gege/.nvm/versions/node/v4.4.1/bin/node,
  argv=[ '/Users/gege/.nvm/versions/node/v4.4.1/bin/node',  '/Users/gege/nearform/nodezoo-system/node_modules/nodezoo-github/srv/github-dev.js',  '--seneca.options.tag=nodezoo-github',  '--seneca-log=type:act' ],
  env={ elasticsearch_PORT_9300: '9200',  MANPATH: '/Users/gege/.nvm/versions/node/v4.4.1/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man',  metrics_PORT: '10001',  mesh_PORT: '10000',  TERM_PROGRAM: 'iTerm.app',  NVM_CD_FLAGS: '',  TERM: 'xterm-256color',  SHELL: '/bin/bash',  TMPDIR: '/var/folders/cl/vzm9v8gx7w57_h2xghl20j740000gn/T/',  elasticsearch_PORT_9200: '9200',  Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.0eR56y4VZi/Render',  NVM_PATH: '/Users/gege/.nvm/versions/node/v4.4.1/lib/node',  DOCKER_HOST: 'tcp://172.16.183.129:2376',  influx_PORT_8083: '8086',  search_PORT: '10003',  npm_PORT: '10004',  influx_PORT_8086: '8086',  USER: 'gege',  NVM_DIR: '/Users/gege/.nvm',  SERVICE_HOST: '0.0.0.0',  DOCKER_MACHINE_NAME: 'default',  SERVICE_PORT: '20005',  concorda_PORT: '10008',  SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.0WBSeFgNkY/Listeners',  TOKEN: 'f2c56d03f8652f282658cfb5c8cb0409f0fa2fb3',  __CF_USER_TEXT_ENCODING: '0x1F5:0x0:0x0',  github_PORT: '10005',  DOCKER_TLS_VERIFY: '1',  web_PORT: '10007',  PROXY_HOST: '127.0.0.1',  PATH: '/Users/gege/.nvm/versions/node/v4.4.1/bin:/Users/gege/.nvm/versions/node/v4.4.1/lib/node_modules/fuge/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin',  NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist',  PWD: '/Users/gege/nearform/nodezoo-system/node_modules/nodezoo-github',  travis_PORT: '10006',  LANG: 'en_US.UTF-8',  ITERM_PROFILE: 'Default',  XPC_FLAGS: '0x0',  XPC_SERVICE_NAME: '0',  HOME: '/Users/gege',  COLORFGBG: '7;0',  SHLVL: '1',  DOCKER_CERT_PATH: '/Users/gege/.docker/machine/machines/default',  info_PORT: '10002',  vidi_PORT: '10009',  ITERM_SESSION_ID: 'w0t0p1:C073D28C-AD08-47A5-899F-D2FEE6FE9EDE',  LOGNAME: 'gege',  NVM_BIN: '/Users/gege/.nvm/versions/node/v4.4.1/bin',  NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist' }

SENECA TERMINATED (on timeout) at 2016-03-28T22:55:30.059Z.

Placeholders for missing data on info page

Sometimes fields do not have a value if the user hasn't filled them out in npm or github etc. It might be nice to have placeholder data for this case instead of leaving it blank or not showing the field at all.

Here is an example of fuge missing a homepage:
screen shot 2016-04-21 at 12 30 52

Improve responsiveness

It seems there are a lot of 'inbetween' sizes where the site is two small or has too much padding as the size decreases. It looks like we need more comprehensive responsive points.

Search screen feedback

Based on the following screenshot,

screen shot 2016-04-06 at 14 45 58

  • Module names should be all lower case
  • Make Star and Fork numbers links (to stars and forks respectively)
  • Change see related modules to more info and link to the info page
  • Decrease the overall size of search result elements (they could be half as tall)

Improve frontend devs data experience

People working on the frontend need to have an up to date data reference to work from. With this in mind I think we need the following actions.

Add sample calls and data to readme's

@matt-oc please make an issue on npm, github, travis. This issue asks to update the readme with sample data from each response. The expectation is each pattern in handled and emitted section will have some sample code on how to call the pattern and a sample result that gives people a solid idea of what to expect in cases of a valid response. Assign these issues between yourself @CodeWriterWriter and @shanel262 and @powerbrian

Add Isolated Mode to npm and travis

Add isolated mode to Travis and Npm. This is already been done in Github. For ports us 8053 for travis and '8051' for npm. @matt-oc please make issues for these and assign them myself. Adding isolated mode will allow designers to npm run isolated and test what data comes back easy

Use mem-store in Isolated Mode

We have added redis for hard caching in npm, travis and github. In Isolated mode this is an additional uneeded overhead. We have a flag that can control the mode we are in. When in isolated mode we should not load the redis store plugin. This will instead use mem-store and not require additional infrasturcture to be ran. @CodeWriterWriter can you make an issue on each library (npm, travis, github) nothing this so we can assign it out to people later?

search item changes

screen shot 2016-01-17 at 23 31 59

- make npm / github logo's as big as the hex logo - add some vertical padding between icons and 'See similar modules' - drop fontsize of 'See similar modules' to demphasis it a little. - make info / star / fork icons bigger to emphasis them more

Info.js

Can we get a listing of available information we can pull from git/travis/npm?

/info should redirect to /

When no module name is provided info/ should redirect to / This can be handled in the client router by adding a route for it.

Bring in NPM Download Info to search results

In search-result.js, remove the git watch/fork/stars

Bring in NPM Download *Last Month Info *

@mcdonnelldean Do you agree with this? I think all 3 (day/week/month download info is too much for a search result, but last month is probably the best. )

Have an icon with text layout as seen here

c857870e-fca2-11e5-9de1-cd0895b6a7ee

Placeholder for loading results

Due to our implementation using websockets, the results will trickle in at their leisure.

The issue with this is that the user may not be aware that more results are loading (on the info page). Therefore, it would be nice to have placeholder widget that alerts the user that the information is in the process of being pulled.

Move UI to React / Redux

This needs to be done for each iteration. The UI is not part of the workshop as such so all iterations of the workshop should have the same UI.

@thefoxis I think we will get the UI work completed on a branch off master and do the latest iteration too. We should be able to hand off to our interns then to replicate the work we have done in the earlier iterations.

As a user of nodezoo-web, I'd like to be able to:

The more feedback we have, the better an interface becomes. Nodezoo-Web is a way for newcomers to microservices to see them in action, however, we are also exploring our own neat little search engine for modules that is not intended to compete with anything.

Background: The general purpose of this interface is to pull information from various sources related to any particular module. So for instance, if I search for seneca, a microservice framework for node.js, it will pull back information from github, travis, and npm (We will be adding more). So I ask, what information would you find useful, and/or features. The most basic use case is to have everything in one place about a module, but what is "everything."?

So I'm asking, what would you like to see on this interface that would increase the efficiency of our day to day software workflow?

Move to Stylus

Processor is now in place, we should be good to go to convert our css to stylus and take advantage of variables, etc

UI Refresh

Hey @thefoxis

I added notes below. You can do all this on your static fork, I wasn't able to open an issue there so I stook it here. I'm happy for you to convert to stylus too if you want, you don't need to set up a pipeline, it's fine to manually run the process, I'll automate it when when I move it in.

If you have changes to the header feel free to bring em in.

attachment-2

  • Make the search bar wider, button size is perfect
  • In the module list, use the three samples provided below
  • Removed the body text in each list item
  • Add in the a hex logo for each list item using the rating

attachment-3

  • Update the npm section to match the sample data
  • Add the github section same as the npm section
  • Style the items in each section to have a bigger header and no bullet.
  • Add a refresh icon to the blue bar / remove the button, I'm going to use this if slow loading
  • Make the module name larger and stand out more
  • Add npm and github icons beside the header

Data - npm

name: seneca
version: 1.0.0
created: 01/01/2013
url: npmjs.com/seneca
rating: 4

name: seneca-user
version: 0.4.2
created: 01/04/2014
url: npmjs.com/seneca-user
rating: 2

name: seneca-auth
version: 0.5.3
created: 01/05/2013
url: npmjs.com/seneca
rating: 3

Data - Github

name: seneca
version: 1.0.0
created: 01/01/2013
url: github.com/senecajs/seneca
rating: 4

name: seneca-user
version: 0.4.2
created: 01/04/2014
url: github.com/senecajs/seneca-user
rating: 2

name: seneca-auth
version: 0.5.3
created: 01/05/2013
url: github.com/senecajs/seneca-auth
rating: 3

Update Toolbag

As discussed, used the newer version with the broken out plugins.

Search results unavailable unless prior pulled by info page

Just to make a note of it here, when fixed we can close it.

To reproduce:

  1. Open home page
  2. Type something new that you did not search yet, e.g. "underscore"
  3. Search results page is empty
  4. Load /info/underscore URL in the browser
  5. Repeat search
  6. Search results come up with one results that's been pulled by info

Include URL for each result in the info page

As of today, only the github result includes a URL to a module within git, but it would be nice to have it in all results.

Use Case: As a user, I'd like to use nodezoo-web to easily navigate to a module within any of the places it exists in the developer eco-system. I'd treat node-zoo as a convenient bookmarking system. As such, I'd like to be able to click a link in the result list and go to associated web page.

Additionally, the icons for each result list are rendered as if they are clickable (IE: the pointer changes when mousing over the icon). If we implement this feature, perhaps each icon would link to the associated result URL. If the URL doesn't exist, then perhaps link to the main page of npm/travis/git or at least remove the hover pointer change.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.