6 ms·

Blockly: A JavaScript library for building visual programming editors

114 points by selvan 5y ago

deleted 5y ago
[deleted]
dang 5y ago
Past related (I think?) threads: BlocklySQL: A new block-based editor for SQL - https://news.ycombinator.com/item?id=25517043 https://news.ycombinator.com/item?id=25517043 - Dec 2020 (38 comments) Blockly is a library for building visual programming editors - https://news.ycombinator.com/item?id=10763057 https://news.ycombinator.com/item?id=10763057 - Dec 2015 (40 comments) Google Blockly is a library for building visual programming editors - https://news.ycombinator.com/item?id=9987641 https://news.ycombinator.com/item?id=9987641 - Aug 2015 (1 comment) Google's Blockly Games - https://news.ycombinator.com/item?id=8211031 https://news.ycombinator.com/item?id=8211031 - Aug 2014 (18 comments) Google Blockly - a visual programming language - https://news.ycombinator.com/item?id=4050426 https://news.ycombinator.com/item?id=4050426 - May 2012 (123 comments)
pan69 5y ago
Reminds me a bit of Macromedia/Adobe Authorware. https://en.wikipedia.org/wiki/Adobe_Authorware https://en.wikipedia.org/wiki/Adobe_Authorware
dvh 5y ago
Are these block-based visual editors Turing tarpits or entry drugs?
- amitport 5y ago
  They're both IMO. You can do much but if you're inclined to learn it will help with some concepts
- k__ 5y ago
  Depends on how general the solution is, I guess.
- shakna 5y ago
  Blockly can emit sourcecode for a number of programming languages. I used it to compile->Lua when getting one of my nieces started with the NodeMCU ecosystem. So I'd say it was her gateway drug for robotics.
123pie123 5y ago
This looks great, I can't believe I've not seen it before. I'll be looking to introduce this to my kids This is almost the next stage from learning scratch (https://scratch.mit.edu/ https://scratch.mit.edu/)
- mch82 5y ago
  Scratch 3.0 is actually implemented using Blockly. https://en.scratch-wiki.info/wiki/Blockly https://en.scratch-wiki.info/wiki/Blockly
- CuriousSkeptic 5y ago
  If you need a next stage from scratch, do consider Kojo. https://kogics.net/kojo https://kogics.net/kojo
corentin88 5y ago
Wondering if Google Apps Script editor is using Blockly? I couldn’t see it in the list of projects using it.
onion2k 5y ago
The blocks not fitting neatly inside one another in the "do" and "else" blocks is quite infuriating.
- cpcallen 5y ago
  This was originally a rendering bug, but one which turned out to be a massive improvement and so has been kept as a feature: https://developers.google.com/blockly/guides/app-integration/best-practices#2_nesting_sub-stacks https://developers.google.com/blockly/guides/app-integration...
mcv 5y ago
I used that blockly maze to teach kids at my son's primary school some programming. It starts out simple, and then you progress through loops, conditions, and eventually they have to implement a real wall-following algorithm. I had 3 students at a time so I could help them a lot, which some kids definitely needed. But some didn't, and came up with some really interesting algorithms.
jokoon 5y ago
I'm really curious if this could be used for people who need to write code but aren't trained for it or because it's not their job. A lot of people are not willing to learn coding, and I really feel there are possible effort to make it more simple. The first thing that scare those people is the whole "plain text" thing. Spelling errors in programming are not forgiving and that's the first thing learners have trouble with. One example that comes to mind is science. There often is data to process, and excel can obviously do many things, but I'm really confident that more could be done. Programming feels like something that is often done by experts, but it really really doesn't have to. Of course, programmers often disagree that beginners should be given tools to replace experts programmers, but it's still better to have someone who can do the job of a programmer.
- usertanooki 5y ago
  I've had some success teaching workshops to adults who aren't familiar with programming for the product I use it on. A lot of them are able to really grasp how to get things done within a session, but figuring out more advanced things (e.g. loops, functions, dictionaries) is still somewhat clunky.
  - jalk 5y ago
    Exactly - it still takes a programming mindset. In my experience watching people using Scratch et. al. When ppl start to acquire that mindset, the guardrails of visual programming turn into hurdles.
    - themolecularman 5y ago
      Would you recommend people skip Blockly if they want to teach people to code?
misterdata 5y ago
At work we built a BI tool around Blockly in 2013. Still in daily use: https://www.dialogic.nl/wp-content/uploads/2018/02/demo1.gif https://www.dialogic.nl/wp-content/uploads/2018/02/demo1.gif
- vanderZwan 5y ago
  That looks really nice! The interface designer in me immediately wants to scream "Fitt's Law!"¹ and move the header with run/select/save from above the output to between the output and the code blocks though. EDIT: Actually, Fitt's Law tells us not to do that. But scrolling to find those buttons is also wrong. Why not make it a sticky header? ¹ https://www.interaction-design.org/literature/topics/fitts-law https://www.interaction-design.org/literature/topics/fitts-l...
  - mikeyjk 5y ago
    I remember getting into a discussion on Reddit where someone claimed tagging on to a bus was faster by pressing the card right up against the card reader. Always felt like an abuse / misinterpretation of fits law to me.
    - vanderZwan 5y ago
      If I understand your sentence correctly it's a bit of an edge-case (pun not intended). When designing interfaces for a screen, the edges (assuming that moving the mouse to the edge doesn't cause scrolling) can be considered "infinitely" wide or tall for the purpose of Fitt's law. This is a really old insight: https://www.joelonsoftware.com/2000/04/27/designing-for-people-who-have-better-things-to-do-with-their-lives-part-two/ https://www.joelonsoftware.com/2000/04/27/designing-for-peop... Pressing your card against the card reader is the same idea: you don't have to be precise with your motor functions, because as soon as you hit the card reader you know you're close enough. So people can be faster with this approach. (with that in mind, my earlier solution is actually wrong: the buttons shouldn't be put between the output and the code, they should be made sticky)
  - victor106 5y ago
vanderZwan 5y ago
I've just spent half an hour searching through my saved contalks folder trying to find a talk from (I think) last year where a someone talks about their new compiler research regarding block-based languages, specifically to make it easy to design and implement custom block based languages. Does this ring a bell with anyone?
usertanooki 5y ago
I've been using this and a custom React wrapper at work to build an automation tool for legacy Windows apps with a lot of success: https://etacautomation.com https://etacautomation.com Blockly is vanilla JS and very easy to extend as needed (I added a better type system, for example), and their new plugin system is super helpful. Its performance isn't quite there, but I have high hopes for the future with the changes I've seen so far. The devs have been wonderful to work with, too.
- mic-kul 5y ago
  what is your tech stack if you don't mind sharing?
- NoahKAndrews 5y ago
  Is your type system open source? Better typing is something I'd love to have for the FIRST Tech Challenge blocks environment.
wryun 5y ago
The NFP I work for has used this extensively - thanks Google! A few years ago we did a bunch of short free "hour of code" courses with a few different block flavours: https://groklearning.com/hoc/ https://groklearning.com/hoc/ (search for blockly)
c-py 5y ago
I built a tool to create deployment scripts for AWS ECS based on Blockly: https://craftydeploy.com/ https://craftydeploy.com/ It didn't really hit the mark - but working with Blockly was a great experience nonetheless
konsumer 5y ago
One thing I love about blocky vs scratch is that it outputs regular code, in several languages. This means you can use it as "guard rails" up until you understand the concepts, then start using the generated language when you need more. It's also a DSL, in the sense that you can generate regular code from any blocks you make, at any level of the code flow, and you can mix that with already-made blocks for your target language. I started work on a Minecraft bot/mod tool that outputs JavaScript, for example, and added the full API (that is available in JavaScript code) so if you feel limited by the the blocks, you can just focus on the code. I stopped working on it, because the library it depends on to interact with Minecraft stagnated (and got really out of date with Minecraft versions) but a similar approach could be applied to pretty much anything. https://github.com/konsumer/botmodblock https://github.com/konsumer/botmodblock

114 points by selvan 5y ago

deleted 5y ago

[deleted]

dang 5y ago

Past related (I think?) threads: BlocklySQL: A new block-based editor for SQL - https://news.ycombinator.com/item?id=25517043 https://news.ycombinator.com/item?id=25517043 - Dec 2020 (38 comments) Blockly is a library for building visual programming editors - https://news.ycombinator.com/item?id=10763057 https://news.ycombinator.com/item?id=10763057 - Dec 2015 (40 comments) Google Blockly is a library for building visual programming editors - https://news.ycombinator.com/item?id=9987641 https://news.ycombinator.com/item?id=9987641 - Aug 2015 (1 comment) Google's Blockly Games - https://news.ycombinator.com/item?id=8211031 https://news.ycombinator.com/item?id=8211031 - Aug 2014 (18 comments) Google Blockly - a visual programming language - https://news.ycombinator.com/item?id=4050426 https://news.ycombinator.com/item?id=4050426 - May 2012 (123 comments)

pan69 5y ago

Reminds me a bit of Macromedia/Adobe Authorware. https://en.wikipedia.org/wiki/Adobe_Authorware https://en.wikipedia.org/wiki/Adobe_Authorware

dvh 5y ago

Are these block-based visual editors Turing tarpits or entry drugs?

amitport 5y ago
They're both IMO. You can do much but if you're inclined to learn it will help with some concepts
k__ 5y ago
Depends on how general the solution is, I guess.
shakna 5y ago
Blockly can emit sourcecode for a number of programming languages. I used it to compile->Lua when getting one of my nieces started with the NodeMCU ecosystem. So I'd say it was her gateway drug for robotics.

123pie123 5y ago

This looks great, I can't believe I've not seen it before. I'll be looking to introduce this to my kids This is almost the next stage from learning scratch (https://scratch.mit.edu/ https://scratch.mit.edu/)

mch82 5y ago
Scratch 3.0 is actually implemented using Blockly. https://en.scratch-wiki.info/wiki/Blockly https://en.scratch-wiki.info/wiki/Blockly
CuriousSkeptic 5y ago
If you need a next stage from scratch, do consider Kojo. https://kogics.net/kojo https://kogics.net/kojo

corentin88 5y ago

Wondering if Google Apps Script editor is using Blockly? I couldn’t see it in the list of projects using it.

onion2k 5y ago

The blocks not fitting neatly inside one another in the "do" and "else" blocks is quite infuriating.

cpcallen 5y ago
This was originally a rendering bug, but one which turned out to be a massive improvement and so has been kept as a feature: https://developers.google.com/blockly/guides/app-integration/best-practices#2_nesting_sub-stacks https://developers.google.com/blockly/guides/app-integration...

mcv 5y ago

I used that blockly maze to teach kids at my son's primary school some programming. It starts out simple, and then you progress through loops, conditions, and eventually they have to implement a real wall-following algorithm. I had 3 students at a time so I could help them a lot, which some kids definitely needed. But some didn't, and came up with some really interesting algorithms.

jokoon 5y ago

I'm really curious if this could be used for people who need to write code but aren't trained for it or because it's not their job. A lot of people are not willing to learn coding, and I really feel there are possible effort to make it more simple. The first thing that scare those people is the whole "plain text" thing. Spelling errors in programming are not forgiving and that's the first thing learners have trouble with. One example that comes to mind is science. There often is data to process, and excel can obviously do many things, but I'm really confident that more could be done. Programming feels like something that is often done by experts, but it really really doesn't have to. Of course, programmers often disagree that beginners should be given tools to replace experts programmers, but it's still better to have someone who can do the job of a programmer.

usertanooki 5y ago
I've had some success teaching workshops to adults who aren't familiar with programming for the product I use it on. A lot of them are able to really grasp how to get things done within a session, but figuring out more advanced things (e.g. loops, functions, dictionaries) is still somewhat clunky.
- jalk 5y ago
  Exactly - it still takes a programming mindset. In my experience watching people using Scratch et. al. When ppl start to acquire that mindset, the guardrails of visual programming turn into hurdles.
  - themolecularman 5y ago
    Would you recommend people skip Blockly if they want to teach people to code?

misterdata 5y ago

At work we built a BI tool around Blockly in 2013. Still in daily use: https://www.dialogic.nl/wp-content/uploads/2018/02/demo1.gif https://www.dialogic.nl/wp-content/uploads/2018/02/demo1.gif

vanderZwan 5y ago
That looks really nice! The interface designer in me immediately wants to scream "Fitt's Law!"¹ and move the header with run/select/save from above the output to between the output and the code blocks though. EDIT: Actually, Fitt's Law tells us not to do that. But scrolling to find those buttons is also wrong. Why not make it a sticky header? ¹ https://www.interaction-design.org/literature/topics/fitts-law https://www.interaction-design.org/literature/topics/fitts-l...
- mikeyjk 5y ago
  I remember getting into a discussion on Reddit where someone claimed tagging on to a bus was faster by pressing the card right up against the card reader. Always felt like an abuse / misinterpretation of fits law to me.
  - vanderZwan 5y ago
    If I understand your sentence correctly it's a bit of an edge-case (pun not intended). When designing interfaces for a screen, the edges (assuming that moving the mouse to the edge doesn't cause scrolling) can be considered "infinitely" wide or tall for the purpose of Fitt's law. This is a really old insight: https://www.joelonsoftware.com/2000/04/27/designing-for-people-who-have-better-things-to-do-with-their-lives-part-two/ https://www.joelonsoftware.com/2000/04/27/designing-for-peop... Pressing your card against the card reader is the same idea: you don't have to be precise with your motor functions, because as soon as you hit the card reader you know you're close enough. So people can be faster with this approach. (with that in mind, my earlier solution is actually wrong: the buttons shouldn't be put between the output and the code, they should be made sticky)
- victor106 5y ago

vanderZwan 5y ago

I've just spent half an hour searching through my saved contalks folder trying to find a talk from (I think) last year where a someone talks about their new compiler research regarding block-based languages, specifically to make it easy to design and implement custom block based languages. Does this ring a bell with anyone?

usertanooki 5y ago

I've been using this and a custom React wrapper at work to build an automation tool for legacy Windows apps with a lot of success: https://etacautomation.com https://etacautomation.com Blockly is vanilla JS and very easy to extend as needed (I added a better type system, for example), and their new plugin system is super helpful. Its performance isn't quite there, but I have high hopes for the future with the changes I've seen so far. The devs have been wonderful to work with, too.

mic-kul 5y ago
what is your tech stack if you don't mind sharing?
NoahKAndrews 5y ago
Is your type system open source? Better typing is something I'd love to have for the FIRST Tech Challenge blocks environment.

wryun 5y ago

The NFP I work for has used this extensively - thanks Google! A few years ago we did a bunch of short free "hour of code" courses with a few different block flavours: https://groklearning.com/hoc/ https://groklearning.com/hoc/ (search for blockly)

c-py 5y ago

I built a tool to create deployment scripts for AWS ECS based on Blockly: https://craftydeploy.com/ https://craftydeploy.com/ It didn't really hit the mark - but working with Blockly was a great experience nonetheless

konsumer 5y ago

One thing I love about blocky vs scratch is that it outputs regular code, in several languages. This means you can use it as "guard rails" up until you understand the concepts, then start using the generated language when you need more. It's also a DSL, in the sense that you can generate regular code from any blocks you make, at any level of the code flow, and you can mix that with already-made blocks for your target language. I started work on a Minecraft bot/mod tool that outputs JavaScript, for example, and added the full API (that is available in JavaScript code) so if you feel limited by the the blocks, you can just focus on the code. I stopped working on it, because the library it depends on to interact with Minecraft stagnated (and got really out of date with Minecraft versions) but a similar approach could be applied to pretty much anything. https://github.com/konsumer/botmodblock https://github.com/konsumer/botmodblock