opensourceman ( url for slides with animations )

Opensourceman

by Andrii Vandakurov, frontend tech lead

eleks.com

Agenda● What is Open Source ● Web-based hosting service● Create demo project● NPM stuff● Public page● Continuous integration● Static site generators● Enhancing our site● Where to host● How to organise the project● Real life examples

twitter: Toastman_github: toastman

Free software movementFreedom to distribute and not freedom from cost.Richard Stallman formally founded the movement in 1983 by launching the GNU Project

1983 2014

● Co-founder of League for Programming Freedom

● Main author of free software licenses

● As of 2016, he has received fifteen honorary doctorates and professorships

Open Source (1998)

Computer software with its source code made available with a license in which the copyright holder provides the rights to study, change, and distribute the software to anyone and for any purpose.

Web-based hosting service

Lets create our open source project

Tech stack: ES6, Webpack, SASS, Jasmine

Lets create our open source project

NPM scriptsThis runs an arbitrary command from a package's "scripts" object.

{ "name": “itweekenddemo",

... "scripts": { "test": "node_modules/.bin/jasmine JASMINE_CONFIG_PATH=jasmine.json", "dev": "node_modules/.bin/webpack-dev-server", "build": "node_modules/.bin/webpack" }, "devDependencies": {

... }}

// run from CLInpm testnpm run devnpm run build

Online Markdown Editor: http://dillinger.io/Update README file

Github pages (gh-pages branch)Public url http://username.github.io/projectname

Gh-pages sync with master

Publish to NPM

// package.json{ "name": “itweekenddemo",

... "version": “0.0.1”,

...}

// run from CLInpm publish

// run from another projectnpm install itweekenddemo —save

Share your package with the world

// insert in your html<script src=“node_modules/itweekenddemo/dist/scroller.bundle.js"></script>

Local NPM package development

// run from CLIcd ~/projects/node-redis # go into the package directorynpm link # creates global linkcd ~/projects/node-bloggy # go into some other package directory.npm link redis # link-install the package

npm list -g --depth=0 # check your link address

Use npm link for this. It will create a globally-installed symbolic link from prefix/package-name to the current folder.

Now, any changes to ~/projects/node-redis will be reflected in ~/projects/node-bloggy/node_modules/node-redis/.

Continuous integration (CI)Is a development practice that requires developers to integrate code into a shared repository several times a day. Each check-in is then verified by an automated build, allowing teams to detect problems early

Travis CI

Travis CI Setup// .travis.ymlinstall: - npm ilanguage: node_jsnode_js: - "4.2.4"script: - npm test - npm run build

Travis CI Passing build

Static site generatorsIs a software that takes some text + templates as input and produces html files on the output.Static site generators list: http://www.staticgen.com/

HEXO

Enhancing our siteWe can add more functionality to our static site

Live commentsBlog comment hosting service for web sites and online communities that uses a networked platform

Email functionalityEmail marketing service and the trading name of its operator, a United States company.

Backend as a service

● Hosting● Auth (supports social login providers )● Storage● DB● Cloud Messaging● Analytics● Realtime chat (Firechat)● Collaborative realtime editor (Firepad)

Cloud services provider and backend as a service company based in San Francisco, California.

Where to host ?

How to organise ?

Splitting up large codebases into separate independently versioned packages is extremely useful for code sharing. However, making changes across many repositories is messy and difficult to track, and testing across repositories gets complicated really fast.

https://github.com/lerna/lerna

Projects like Babel, React, Angular, Ember, Meteor, Jest and many others develop all of their packages within a single repository.

Real life examples (angular-heremaps)

Real life examples (mockapitron)

Helpful links:● The Cathedral and the Bazaar ( https://goo.gl/G6a55c

)● Github pages (https://pages.github.com/ ) ● itweekenddemo ( https://goo.gl/ao8gH0 )● Static site generators (http://www.staticgen.com/)● Comparison of CI ( https://goo.gl/G8rGPM )● Lerna ( https://github.com/lerna/lerna )

QA ?