Slides for IT Weekend conference. Its about open source and why its so cool. Unfortunately slideshare doesn't support slides with gif animations so this is url for slides with animations https://goo.gl/R638tW

1. Opensourceman
by Andrii Vandakurov, frontend tech lead
eleks.com

2. 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

3. Free software movement
Freedom 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

4. 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.

5. Web-based hosting service

6. Lets create our open source project
Tech stack: ES6, Webpack, SASS, Jasmine

7. Lets create our open source project

8. NPM scripts
This 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 CLI
npm test
npm run dev
npm run build

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

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

11. Gh-pages sync with master

12. Publish to NPM
// package.json
{
"name": “itweekenddemo",
...
"version": “0.0.1”,
...
}
// run from CLI
npm publish
// run from another project
npm install itweekenddemo —save
Share your package with the world
// insert in your html
<script src=“node_modules/itweekenddemo/dist/scroller.bundle.js"></script>

13. Local NPM package development
// run from CLI
cd ~/projects/node-redis # go into the package directory
npm link # creates global link
cd ~/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/.

14. 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

15. Travis CI

16. Travis CI Setup
// .travis.yml
install:
- npm i
language: node_js
node_js:
- "4.2.4"
script:
- npm test
- npm run build

17. Travis CI Passing build

18. Static site generators
Is 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

19. Enhancing our site
We can add more functionality to our static site

20. Live comments
Blog comment hosting service for web
sites and online communities that uses a
networked platform

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

22. 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.

23. Where to host ?

24. 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.

25. Real life examples (angular-heremaps)

26. Real life examples (mockapitron)

27. 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 ?