opensourceman ( url for slides with animations )
TRANSCRIPT
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 ?