LT Presentation on Node Tokyo Gakuen 2015 (Tokyo Node Festival) http://nodefest.jp/2015/

1. Hack Atom w/ Node
Kenju Wagatsuma

2. /*
* Introduce Myself
*
* @kenjuwagatsuma
*/

3. 'me' = {
name : 'Kenju Wagatsuma ( KJ )’,
}

4. 'me' = {
name : 'Kenju Wagatsuma ( KJ )’,
company : 'Recruit Technologies Co.,LTD.',
}

5. 'me' = {
name : 'Kenju Wagatsuma ( KJ )’,
company : 'Recruit Technologies Co.,LTD.',
profession : 'Android Development',
}

6. 'me' = {
name : 'Kenju Wagatsuma ( KJ )’,
company : 'Recruit Technologies Co.,LTD.',
profession : 'Android Development',
career : {
2011 : 'Graphic Designer ( PS, AI, ID )'
2013 : 'Web Designer ( HTML+CSS, jQuery)'
2014 : 'Web Engineer ( JavaScript )'
2015 : 'Programmer ( Java/Android )'
}
}

7. Me * Node
=

8. Me * Node
= Not Professional
(Just for fun)

19. /*
* What Atom?
*/

20. Atom is: ->
❖ Project supported by GitHub

21. Atom is: ->
❖ Project supported by GitHub
❖ Specialized variant of Chromium
designed to be a text editor

22. Atom is: ->
❖ Project supported by GitHub
❖ Specialized variant of Chromium
designed to be a text editor
◎ asset pipelines

23. Atom is: ->
❖ Project supported by GitHub
❖ Specialized variant of Chromium
designed to be a text editor
◎ asset pipelines
◎ access to local files

24. Atom is: ->
❖ Project supported by GitHub
❖ Specialized variant of Chromium
designed to be a text editor
◎ asset pipelines
◎ access to local files
◎ asynchronous module definition

25. Atom is: ->
❖ Project supported by GitHub
❖ Specialized variant of Chromium
designed to be a text editor
◎ asset pipelines
◎ access to local files
◎ asynchronous module definition
◎ script concatenation

26. https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor

27. https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
(Before Electron)

28. /*
* Why Atom?
*/

29. Why Atom: ->
❖ Play with Node API
❖ FS, HTTP, Stream, Async methods…

30. Why Atom: ->
❖ Play with Node API
❖ FS, HTTP, Stream, Async methods…
❖ Always running on the newest Chromium
❖ No more polyfill
❖ Can ignore browser compatibility

31. Why Atom: ->
❖ Play with Node API
❖ FS, HTTP, Stream, Async methods…
❖ Always running on the newest Chromium
❖ No more polyfill
❖ Can ignore browser compatibility
❖ Support from GitHub teams
❖ Long-term development

32. /*
* How Atom?
*/

33. ❖ 1. Contribute to Atom Editor
❖ 2. Contribute to Atom Packages
❖ 3. Write Your Own Atom Package
You can: ->

34. ❖ 1. Contribute to Atom Editor
❖ 2. Contribute to Atom Packages
❖ 3. Write Your Own Atom Package
You can: ->

35. *
* @param x : ?(mental)
* @param y : ?(skill)
* @param z : ?(grammer)
* @return ?
*/
contribute(x, y, z): ->
while x.isExist
doYourBest

36. *
* @param x : Passion
* @param y : Node
* @param z : CoffeScript
* @return ?
*/
contribute(x, y, z): ->
while x.isExist
doYourBest

37. ❖ 1. Contribute to Atom Editor
❖ 2. Contribute to Atom Packages
❖ 3. Write Your Own Atom Package
You can: ->

40. /*
* We Need Your Help!
*/

41. ❖ 1. Contribute to Atom Editor
❖ 2. Contribute to Atom Packages
❖ 3. Write Your Own Atom Package
You can: ->

42. Atom API: ->
Clipboard
Color
Cursor
Directory
File
GitRepository
KeymapManager
TextBuffer
ThemeManager
…etc

43. Get Started: ->
‘cmd-shift-p’
then
‘Package Generator’
… That’s it!

44. Package: ->
This is the basic
package layout.
`lib` file is the core
of the packages:
***-view.coffee
***.coffee

45. Debug: ->
It’s based on
Chromium, right?

46. Test: ->
Oh, my princess
Jasmine♥

47. Publish: ->
`apm publish`
is
what you’re looking for.
Run
`apm publish -h`
for help

48. /*
* Conclusion
*/

49. ❖ 1. Contribute to Atom Editor
→ Please do if you can :)
❖ 2. Contribute to Atom Packages
→ A lot of rooms for improvement
❖ 3. Write Your Own Atom Package
→ Super Easy
You can: ->

50. Read this: ->
https://atom.io/docs/v1.1.0/
Atom
Flight Manual

51. Ask Here: ->
https://discuss.atom.io/
Atom Discuss

52. Join us: ->
https://atomio.slack.com/
Atom Slack

53. Atom is really hackable

54. Atom is really hackable
powered by Node.js

55. Atom is really hackable
powered by Node.js
and you are Node Professional!

57. http://bit.ly/nodefest2015kj
Thanks;

58. /*
* Appendix
*/

59. ❖ Release Notes
➡ https://atom.io/releases
❖ API References
➡ https://atom.io/docs/api/v1.1.0/Atom
❖ Blog
➡ http://blog.atom.io/
References: ->

60. ❖ “node-webkit” by Cheng Zhao
➡ https://speakerdeck.com/zcbenz/
node-webkit-app-runtime-based-on-
chromium-and-node-dot-js
❖ “Atom” by John Nunemaker
➡ https://speakerdeck.com/
jnunemaker/atom
Best Slides: ->