Code Monkey home page Code Monkey logo

pollock's Introduction

Install & Run

  1. Check your Node.js version is 5+.
  2. npm install
  3. Run server with npm start.
  4. Go to http://localhost:3000/.

PS: Do not forget to also run mongodb (sometimes with mongod)

What is currently working?

  • All pages are working: you can sign-up, sign-in, create/edit/access/answer polls and reading polls stats.
  • Website design part could be improved, but we still think it is user-friendly enough to be used without big issues.
  • We can't delete a poll yet.

Dev

  • gulp.setup copy angular2 javascript bundle to the public folder
  • gulp ts for the Angular part, compile typescript files to javascript
  • gulp watch.ts for the Angular part, watch typescript files and compile to javascript
  • gulp sass for the SASS part, compile sass files to css
  • gulp watch.sass for the SASS part, watch sass files and compile to css
  • gulp watch watch both Angular and SASS part
  • gulp alias to setup and then watch both Angular and SASS part

You can also watch both if you simply run gulp.

Watch Sass and TypeScript

  • First install gulp if you want to watch and automatically update Sass and TypeScript project's files.
  • Run the gulp command into the root directory of the project.

Add a new view

If you want to add a new view to the project, there are several steps. You have to know that views are grouped by components.

  • First of all, create your new Jade view in the "/server/view/components/" directory.
  • Once done, create a new folder containing the TypeScript file related to your new view in the "/client/components/" directory. In this file, you'll have to set the view's selector and template's URL (indicating where in the Jade file), write a directive for the application's router and export the view's class. You can help yourself by building the file on what already exists.
  • Then, register your new view in the application's bootstrap file ("/client/bootstrap.ts") under the @RouteConfig annotation. Don't forget to import your new view's class in the header!
  • Finally, you also have to link your view with the Express' router, by adding a clause on the "/server/routes/components.js" file. You will be able to use it if you want to communicate with the database, for example.

How we build the app

Angular2

Why Angular2?

Even if Angular2 is still in Alpha Beta release, we wanted to try it because of the modernity it brings with it. In a few years it'll probably be very mainstream and it would be a plus to know it. Angular2 is not only one of the most current and modern way to design websites but also had many advantages, including:

  • The using of web components so you don't have to use the $scope anymore
  • ES7's decorators, which simplify notation
  • The using of TypeScript language, which is a more modern and complete way to write code
  • Performance: Angular got a lot of overlay within years so it became heavy ; Angular2 has been entirely reconsidered and is lighter
  • Angular was designed during a time when Smartphones and tablets where rarer than our time; Angular2 is really current
  • Within the last years, Angular's developers had a lot of time to think about a more easily and proper way to use it so you can understand everything, including these automagic things happening in the background

Technologies

We choose to use Angular2 with Typescript. Gulp is used to compile the typescript files to javascript (ES5).

  • Source files are in the client/ folder
  • tsconfig.json is the configuration file used by tsc (typescript compiler) the compile typescript files to public/javascript/ folder. emitDecoratorMetadata and experimentalDecorators are ES7 features and need to be activated for Angular2
  • We use System.js to load files in different folders. config.js is loaded to know how to load javascript files. We can then import files as modules and just load the bootstrap file with System.import('javascripts/bootstrap.js')
  • tsd.json was generated with tsd, it load interfaces for installed modules to add types to javascript code

Documentation

You can find the Heroku apps here : https://pollockweb.herokuapp.com/ ; you can find our product page here : http://edri.github.io/Pollock/.

pollock's People

Contributors

bafs avatar edri avatar binarybrain avatar wasadigi avatar alphahydrae avatar

Stargazers

 avatar

Watchers

 avatar James Cloos avatar  avatar  avatar  avatar

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.