Discussion: Video tutorial series

[amilajack]

I'm thinking of making a video tutorial series for this repo. I'm thinking of covering the following topics:

• Getting Started
  • IDE/text editor setup
  • Project Directory Structure walkthrough
  • Configuration explanation
    • Webpack, babel, eslint, flow, electron, npm scripts, redux
  • Creating Components
  • Adding env variables to dev and prod
  • Routing
  • Managing state with redux
  • Testing with spectron, enzyme, and jest
  • Creating a todo list sample app from scratch using the boilerplate
• Advanced
  • IPC
  • Debugging main/renderer processes

I'm sure there are video tutorial series out there for these topics but based on the issues/questions that have asked and made, I think explaining these topics in the context of this project would help significantly, especially for those who are new to the JS ecosystem.

[AlexFrazer]

wouldn't IDE setup be a bit opinionated?

[amilajack]

We already have a list of plugins that we recommend. A lot of people that use this project are new to javascript and its vast ecosystem so I'm pretty sure they aren't aware of how to properly integrate tools into their workflow. I'm thinking of covering a wide variety of tools and IDE's including:

• vim
• sublime
• atom
• vs code

Thoughts?

[stefanKuijers]

Great idea!

1. It would be good if you suggest some good starter react resources so that you don't have to teach react it self. It might be good to focus on an overview of the technologies and only go into detail about the boilerplate itself.

2. Creating a good screencast takes time. Only put it in if you are confident that there are not many big changes coming up as the screencast will become useless quite quickly. That would be a shame.

[amilajack]

It would be good if you suggest some good starter react resources

Never even thought of this. I'm in favor of this. Great idea!

Only put it in if you are confident that there are not many big changes coming up as the screencast

Over time, there will be a significant number of changes to the boilerplate. Maybe after every 2-3 releases or so, I can revise the screencasts? This is something we should discuss further.

ping @chentsulin @jhen0409

[degenicus]

Sounds like an excellent idea! I am a bit confused myself on how to set up the state management with Redux, it is a little bit hard to get started with the boilerplate for a beginner like me, with so much stuff going on so I think a tutorial could help.

[amilajack]

js fatigue is one of my growning concerns with this boilerplate. Its actually the reason why I initially thought of creating a video tutorial series.

[jefffriesen]

@m-brantheim If you have't seen it, Dan Abranov did an excellent, free video series on Redux:
https://egghead.io/courses/getting-started-with-redux

Since there are quite a few React and Redux resources out there I would vote for emphasizing Electron-specific tutorials. Then link to good react and redux resources like the one above.

[amilajack]

@m-brantheim Yup! I've seen it. I was planning on electron specific tutorials. Also there seem to be a lot of questions regarding how to create new components and add them so I'll probably cover that.

[rumanHuq]

Even a written tutorial would suffice, I am scratching my head on the package.json scripts.
for example
"hot-updates-server": "cross-env NODE_ENV=development node --trace-warnings -r babel-register ./node_modules/webpack-dev-server/bin/webpack-dev-server --config webpack.config.renderer.dev.js",

specifically node --trace-warnings -r babel-register this part. How does it go along with subsequent webpack call

[amilajack]

@rumanbsl I just added npm scripts to the topics that I intend to cover

Edit: I after adding it, is saw it was already under the config topic

[rumanHuq]

@amilajack would it be possible to share.

[amilajack]

Are you referring to the video tutorials? I haven't worked on them yet so I can't show them.

[jpaveg]

I agree with all the topics you've listed with the exception of react/ redux (unless they're brief). No need to do unnecessary work :)

Very excited for the videos as the main reason I haven't actually used this project in production is because I'm quite new to es6+ js and the related ecosystem. I'd like to fully understand exactly what the boilerplate is doing before I dive in.

I have been going through the source and trying my best to understand whats happening, but searching through docs over and over can get boring/confusing quite quickly if you're someone who is just starting to learn the more advanced aspects of JS tooling.

[ghost]

Did this grow any legs? This boilerplate is awesome and even though I’ve gotten quite comfortable with the react/redux part of it, I’m still lost when anything webpacky or electron main process pops up- would love to see an example of building a windows installer package and setting up auto-updates!!

[amilajack]

I'm still interested in doing this. I'm just trying to find a period of time where I have the time to do this

[ghost]

Cool - I doubt there is, but if there’s any help I can give let me know!

[amilajack]

I'm considering taking donations for this project. It does take a signification amount of time to resolve peoples' issues/questions, fix bugs, add features, etc.

[talha131]

@amilajack You should. There is already a backer link in readme. Is there any issue with it? Are active maintainers not getting donations?

[goldylucks]

How about donations directed at specific documentation / features added?

I'm in touch with some electron based projects that might donate/pay to get features or targeted help/docs.

Regardless, this project is ridiculously awesome, keep up the good work!

PS. I second to @rumanbsl , written text tutorials are much faster to create, and videos are quite hellish to maintain.

I think doing v1 written is a great start. Also react and redux in this project are pretty much regular react and redux.

The tricky parts are tests, automating build process and CI with installers. All the "electron stuff".

PSS. If you think there's value in mobx example/tutorial with this boilerplate, I can do that :)

[dbvrac]

I’d be willing to donate toward some new tutorial examples of applying this project. IE: Add x css gizmos with y middleware to communicate with z information source, like a weather app. I’ve spent too much time trying to discect the current eample set only to find out they’re outdated or too different from the current ERB.

[EricPeter]

Hi guys anyone help, am new to electron I need to embed a machine learning model in an electron desktop application

[jefffriesen]

I don't know if that's an ideal topic for a video series. But I would consider tensorflow.js: https://www.tensorflow.org/js. It works for both training and inference in the browser. If you have a trained model from a library like Keras, you can convert it to work in the browser.

[leeqingyoung]

Is the tutorial released?

[amilajack]

Not yet. Coming soon!

[geek4teck]

Any update on the release date yet?