full stack javascript case study na podstawie maracuya jukebox audio player

32
Full Stack JavaScript Maracuyá Jukebox Marek Będkowski

Upload: marek-bedkowski

Post on 14-Jul-2015

165 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Full Stack JavaScriptMaracuyá Jukebox

Marek Będkowski

Page 2: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Plan

• Demo

• Ogólne wprowadzenie

• Zarządzanie zależnościami/automatyzacja zadań

• Zarządzanie modułami natywnymi

Page 3: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Demo

Page 4: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

A co to ja winampa nie znam???

Demo

Page 5: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Ogólne wprowadzenie

Page 6: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Ogólne wprowadzenie

Page 7: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

JS Stack• Nodejs

• Npm

• Grunt

• Sqlite

• Expressjs

• Socket.io

• jQuery/jQueryMobile

• PhoneGap

• Weinre

• Node-webkit

Page 8: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Npm – zarządzanie zależnościami

• package.json (https://github.com/bendi/maracuya-jukebox/blob/master/maracuya/package.json)

• Zdalne repo: npmjs.org

Total Packages: 79 946

12 299 994 downloads in the last day71 743 126 downloads in the last week300 030 760 downloads in the last month

Page 9: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Grunt – automatyzacja zadań

• Gruntfile.js (https://github.com/bendi/maracuya-jukebox/blob/master/maracuya/Gruntfile.js)

• Oficjalna strona: gruntjs.com

• Łatwo rozszerzanie poprzez pluginy (obecnie 3079)

• grunt-contrib-jshint

Page 10: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Nodejs a wieloplatformowość

Page 11: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Nodejs a wieloplatformowość

Page 12: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Maracuyá Jukebox a odtwarzacz mp3

Page 13: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Odtwarzacz mp3

• …a może napiszę go sam

Page 14: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player
Page 15: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Odtwarzacz mp3

• Open-source

• multi-arch

• No external deps

• play/pause/next/prev/jump/volume

Page 16: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Odtwarzacz mp3

• Mpg123

• Open-source

• multi-arch

• No external deps

• Tryb interaktywny (play/pause/next/prev/jump/volume)

Page 17: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Nodejs a wieloplatformowość

Page 18: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Node-gyp kompilacja modułów natywnych

• Wielo platformowe narzędzie kompilacji

• Pochodna projektu gyp znanego z Chromium

Page 19: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Mpg123 a nodejs…

• node-mpg123n – natywny moduł korzystający z API mpg123

• Wieloplatformowość w takim samym zakresie jak nodejs

Page 20: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player
Page 21: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Mpg123 a nodejs…

• node-mpg123n – natywny moduł korzystający z API mpg123

• Wieloplatformowość w takim samym zakresie jak nodejs

• Wymaga kompilacji modułu podczas wykonywania komendy npminstall

Page 22: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Czy muszę to konfigurować/kompilować???

• node-gyp - konfiguracja

•On Windows:

•Python (v2.7.3 recommended, v3.x.x is not supported)

•Windows XP/Vista/7:

•Microsoft Visual Studio C++ 2010 (Express version works well)

•For 64-bit builds of node and native modules you will also need the Windows 7

64-bit SDK

•If the install fails, try uninstalling any C++ 2010 x64&x86 Redistributable that

you have installed first.

•If you get errors that the 64-bit compilers are not installed you may also need

the compiler update for the Windows SDK 7.1

•Windows 7/8:

•Microsoft Visual Studio C++ 2012 for Windows Desktop (Express version works

well)

Page 23: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Konfigurować?

Page 24: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

A może by tak przechowywać binarki?

Npm – przechowuje biblioteki JavaScript

Page 25: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

A może tak przechowywać binarki?

• Node-pre-gyp

Features

• A command line tool called node-pre-gyp that can install your package'sc++ module from a binary.

• A variety of developer targeted commands for packaging, testing, and publishing binaries.

Page 26: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

A gdzie je przechowywać?

• Amazon S3

• Mpg123n repo (http://mpg123n.s3.amazonaws.com)

Page 27: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Npm install pobiera binarkę

• Npm install (wersja modulu /ABI/platform)

• node-pre-gyp http GET https://mpg123n.s3-us-west-2.amazonaws.com/Release/bindings-v0.0.21-node-v11-win32-ia32.tar.gz

• node-pre-gyp http 200 https://mpg123n.s3-us-west-2.amazonaws.com/Release/bindings-v0.0.21-node-v11-win32-ia32.tar.gz

• [mpg123n] Success: "C:\Users\marek.bedkowski\Documents\maracuya-jukebox\maracuya\node_modules\mpg123n\build\Release\bindings.node" is installed

Page 28: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Konfiguracja

• Package.json

"binary": {"module_name": "bindings","module_path": "./build/Release","host": "https://mpg123n.s3-us-west-2.amazonaws.com","remote_path" : "./{configuration}/"

}

Page 29: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Podsumowanie

• Npm – zarzadzanie zależościami/biblioteki JS

• Node-gyp – buduje moduły natywne

• Node-pre-gyp – pomija proces budowania (pobiera binarkę)

• Grunt – automatyzacja zadań/buduje projekt

Page 30: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

• www.maracuya-jukebox.com

• www.github.com/bendi/maracuya-jukebox

Page 31: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Pytania?

Page 32: Full Stack JavaScript case study na podstawie Maracuya Jukebox audio player

Dziękuję za uwagę

Marek Będkowski