Thanks for the questions! While answering I got a ton more questions, this was nice.
If I could leave one last comment, I recommend: make it your identity to be a learner. I believe programming is about constant learning. Celebrate failures because they teach you what doesn't work, so you can focus on other alternatives that might work. Keep track of small lessons you learned every week. Don't be afraid to look into the source code of any library you use. Don't be afraid to debug it. Don't get lazy. Don't be afraid of reading or trying that different language. Draw on paper. Read articles. Be curious. Put yourself in uncomfortable new situations. Make it your identity to be a learner. I'm one too.
What are some pros and cons of using CycleJS over React?
Good question. First I'd like to clarify that this not so simple to answer, because Cycle.js is a framework and React is a UI library (or half a framework), so it's similar to asking the Pros and Cons of Cars overs Engines. So I'll assume the question is Cycle.js versus React+Redux+Etc.
I'll start with React+Redux+etc:
- Large ecosystem means it's more common to find supporting libraries, jobs, conferences, etc
- Has more familiar concepts if you come from an OOP background, such as class usage, setState, event handler callbacks
- Does component encapsulation well and transparently so once you have a third-party component, you don't need to worry much about it, just pass it some props
- As it's not a framework, you will see a lot of corner-cases unanswered. Before Redux, state management solutions were (too) varied. A similar situation happens now with effects management (redux-loop? redux-observable? redux-sagas?). The React core team usually answers "use what you feel like, it's a matter of style" because they are focused on building React for Facebook and it's not their priority to provide a full frontend framework for the rest of the world. With React+Redux, there is a solution for any problem on npm, but you have to find it and make the choice yourself
thiskeyword and its common headaches
- Redux isn't evolving, and it was built as a tool to demonstrate a proof of concept for a conference talk. There are plenty of pain points (managing hundreds of action types is the largest one IMO) that most people just got used to and don't experience anymore to be painful
- It's a framework and is meant to provide a comprehensive answer for multiple aspects of frontend development. We have official ways of doing: DOM interaction, HTTP effects, state management, SSR, Time effects, and for cases that are lacking, we give a guideline how to structure the application. The result is an overall very consistent architecture for webapps, that uses basically the same simple approach
thiskeyword in sight, meaning you only use functions and streams. This aides testing quite a lot, and you never get
thisbound to the wrong thing or bound to undefined.
- It has a property called "fractal architecture": every component is a Cycle.js app that could be run separately. (This isn't true in the case of some parts of Redux-based apps, for instance)
- Cycle.js for a long time had "stateless functional components", "componentDidCatch", no react-id attributes, features that React is still rolling out
- You can use React (and React Native) as UI library within Cycle.js! This repo is a demo of that https://github.com/staltz/mmmmm-mobile/, despite being early techniques not yet official
- Much smaller community (about 500x smaller last time I measured)
- You need to learn streams and reactive programming (it's not hard, just very different and requires some brain rewiring)
- Handling lists of component instances is surprisingly a hard thing in Cycle.js (this issue https://github.com/cyclejs/cyclejs/issues/312) but we're landing on a solution soon to be official
- Doing chained HTTP requests isn't the best developer experience
Overall, I wouldn't pick a winner. Some people are keen on choosing a winning technology, but I prefer to see cross-pollination. For instance, if we could finally have seamless conversions between React components and Web Components, that would mean the big React ecosystem would be unlocked for Angular developers, Vue developers, jQuery developers, Cycle.js developers. Another example is React within Cycle.js, a technique I've been using. Yet another, not yet real, example is: React community picking some ideas from Cycle.js (perhaps fractal state management with lenses? https://github.com/staltz/cycle-onionify or time as a dependency https://github.com/cyclejs/time/). This way we all win.
Which active programmers do you look up to and follow closely?
In random order (and twitter accounts):
P2P and/or cool ideas
- Dominic Tarr (@dominictarr)
- James Haliday (@substack)
- Paul Frazee (@pfrazee)
- Mathias Buus (@mafintosh)
- Feross (@feross)
Functional programming or just programming
- Phil Freeman (@paf31)
- Brian Lonsdorf (@drboolean)
- Brian Marick (@marick)
- Justin Woo (@jusrin00)
- Paul Taylor (@trxcllnt)
- Jan van Brügge (@SuperManitu)
- Tylor Steinberger (@TylorS167)
- Nick Johnstone (@widdnz)
- Gleb Bahmutov (@bahmutov)
- Oleg Grenrus (@phadej)
- David Sheldrick (@djsheldrick)
Hi André, What major front end framework (Angular, React, Vue, or any other) do you think is better to work with FRP?
I would say React, because it's a UI library, not a framework, and you have a bit more freedom to choose how to solve problems. You can include a reactive programming library like most.js or RxJS, and handle functional and reactive programming architecture however you want, and only for DOM rendering using React. With other (full) frameworks it's a bit harder to customize that.
Note: I am not saying "React is FRP", I'm just saying "you can build your own custom FRP and use React in the middle".
10 years is a bit too far for making good predictions (for instance, 10 years ago was 2007, not even AngularJS v1 existed!).
Given an opportunity to be 20 years old again, how would you start your programming career today? 🤓
At that time, the hot technologies were Java, MySQL, Hibernate, and maybe Flash. I was at the University and I studied a bit too much of math (like 4 courses on Linear Algebra). I really wished I had studied more about compilers, and all sorts of programming paradigms, from Assembly to concatenative languages, to very high level languages like Haskell. Stretch your brain as much as you can while you're young. It's not so much about what things are useful, it's mostly about opening your mind as much as possible.
Hi André, I would like to know how you went about building Cold Tension (the background story if you can in terms of conceptualization, design and development :-)) and how long it took to build the game. Also, what are the things one must do in order to get started with building a game like Cold Tension?
This is my favorite question so far. Thanks for trying out Cold Tension.
Me and Glauber Kotaki (pixel artist for Rogue Legacy, among other achievements) were inspired by Shadow of the Colossus and we saw a game dev competition coming up in Brazil, so we decided to make something. We had made 2D games together in the past. This time we wanted to build a game where art guides the "feeling" in the game on a subconscious level, without necessarily having dialogues to guide the story. Journey (PS3) is also one of these types of games.
For some reason which I can't remember right now, we landed on the theme of dangerous mountain climbing, and from there we got the basic story and characters in place. Most important elements in this game were: "fluid" pixel art (emphasizing smooth terrain, not tiles/bricks), soundtrack (I made it myself), ambience, and the idea of very tough persistence. The game is so much about persistence and tension, that honestly, it didn't make for a good or exciting gameplay.
The development was in C/C++ with Allegro, done back in 2007. It took us something like 2 months (if I recall correctly). The most intense part was inputting level/map data into the code, unfortunately I was hard-coding each X/Y coordinate. In the middle of that process I noticed that was a stupid idea, and built a quick-and-dirty level editor.
My basic learning was: for almost any game you build, you're probably going to need some game design tools, game editing tools, etc. At least level editors and/or some Lua scripts, that sort of stuff. A little known fact is that the levels are dynamically built (from a set of presets of pieces of the level) so that every time you play, it's a bit different. In hindsight, that was an unneeded and we could have cut that effort-sink and used the time elsewhere, like making the micro gameplay more fun.
Fun fact: I once landed a job by demoing the game and telling "this game has no bugs" (by bugs I meant gameplay glitches, which is more accurately correct), and I then was about to open the game's executable. The screen went black for 3 seconds. I held my breath while I thought I maybe was experiencing a bug since the game wouldn't open. Then the game opened, and I said: "see? no bugs". I don't recommend this in an interview. :)
I'm a proponent of getting your basics very polished, and learning concepts instead of tools. So this list won't be a list of specific libraries. It's most important to be an independent programmer, able to build your own tools instead of depending on others. And you really don't need to know much in order to build basic tools.
- Learn basic ES5, like functions, arrays, objects. MDN is often enough
- Write raw callback-based async without any tools and try to manage it yourself. Focus on gaining an intimate understanding of the problem, not the solution
- Functional collections, this is a great resource http://reactivex.io/learnrx/ (not necessarily just RxJS) and you'll happen to learn how to manage callback hell plus array helpers
- Use jQuery or document.querySelector and addEventListener to build some apps
- Read the source code of small frameworks like Backbone, Choo, Yo-yo. Don't be afraid of reading source code. These are small frameworks, so it really doesn't hurt to look at them
After that, you'll have some experience with the fundamental building blocks in JS, and the common problems (not the solutions) we usually encounter in frontend dev.
What are your general views on ReasonML, Elm and other functional languages that can compile to JS? Would you consider developing Cycle.js in one of these languages?
ReasonML: I don't have any qualified opinion because I haven't tried it yet.
Elm: has a great proposition but in my perspective seems a bit "stuck" at the moment. Not a lot of progress, while usually its pain points are downplayed by key people in the community.
PureScript (the "other" functional language): highly under-rated language worth taking a look. It's a bit heavier on the learning investment side, but it's not gratuitous. PS has some features that surpass Haskell (it's like Haskell done right from day one), and plenty of features that benefit people in a concrete way, like type holes (compiler tells you what's missing), row types, reflection, etc. Give it a serious try.
Hi André! How do you like living here in Finland? 🙂
Finland is fantastic and even when Finns complain about it, I usually don't see any serious problem. Of course nothing is perfect, but this is a 9/10 country. PS: I like the winter darkness because the computer screen doesn't get reflection from the sun. :D
How did you learn playing guitar? Do you still play it?
BTW, look what I have found 🤓 https://soundcloud.com/andrestaltz
Do you think AngularJS is dead? Many startups in my city, Bengaluru, have ditched Angular in the frontend completely.
What went wrong with Angular?
I'm sorry, I'll be honest: I always thought AngularJS was kind of weird. I never really understood why did people start liking it in the first place, so I'm not surprised people are migrating away from it.
Angular.io on the other hand does a lot of things right. There is also some beauty in it, most components are specified as CSS+HTML+JS, and it reads in that order from top to bottom in one file. That's kind of cool. But I don't have hands-on experience with that framework so I don't have any qualified opinion.
All that said, there is also a strong network effect when it comes to adopting technologies. People just use what most people are using, and that's because it's the easiest to justify: the most popular solution is the least surprising solution, and people can get defensive or scared of risks when it comes to new and surprising stuff, so they prefer to have a feeling of "safety" that comes from picking something familiar (I'm reading a psychology book about these effects). At the moment, that seems to be React.
How can one sell CycleJS to its boss (or during a job interview) ?
Smart and outside-of-the-box thinkers will suddenly hear about this company and feel like joining you.
In other aspects, there isn't a "risk" in adopting this technology. You can integrate plugins from jQuery, components from React or Polymer (for Material Design), you can get things done, there is a chat with activity everyday, 3 core maintainers with time/budget to fix bugs and improve the framework. Other frameworks might be bigger, but usually people don't measure the risks accurately. There is very little risk involved in picking such technology. It's MIT licensed (no PATENTS file), and it's not as critical component as a database for your backend.
Hi Andre, I've been focusing on Js for like a 18 months after coming from PHP and Rails. Ive mainly been working with frontend frameworks and tooling but I feel like a jack of all trades, what are the best areas to focus on if I want to become better at FP and asynchronous/ reactive programming, do I need to switch my focus to the back end(node), also do you think it's better to focus on either server or client side over full stack?
In the last CycleConf you talked about making programming more visual. Are you still working on this problem?
Making programming become visual and intuitive is our (distant) goal, so yes, but there are many milestones before that. I'm actively working on fixing important issues with the framework, and one issue at a time will take us closer to that goal. For instance, we recently had to stop and think how include pull values (e.g. Math.random() or makeUUID()) into the framework (https://github.com/cyclejs/cyclejs/issues/581) in a way that makes it best for a visual editor.
What programming languages, paradigms or ideas have influenced you to create Cycle.js? How your conceptual thinking shifted from where you've been to where you know? where it was (conceptual thinking) and where it know and path which you've went through?
In the few months before Cycle.js, I was using RxJava and Kotlin, so I would say RxJava was an influence, but it's quite obvious (since Cycle.js used RxJS from day one). I was mostly guided by a gut feeling about "separation of concerns" that led me to eventually explain reactive programming as
A -->B not
A--> B (https://cycle.js.org/streams.html#streams-reactive-programming).
I am not sure if these influenced me, since they happened long ago, but in the University I learned Prolog, which was a fully declarative paradigm, where many concepts were backwards. In the syntax itself, you declare "this if that", not "if (this) then that". Also another important paradigm was an Event Matrix in game editors like The Games Factory, which is a programming environment without (text) code. All you have is a matrix describing actions (rows) that should happen in reaction to events (columns). Those two things defined my idea of programming very strongly and very early in my career.
What inspired you to write react-native-node?
I wanted to copy-paste the Scuttlebutt (https://www.scuttlebutt.nz/) libraries into a React Native project to get access to that P2P social network. It obviously didn't work in React Native due to lack of support for many modules like
sodium, leveldb, so I started looking for options. Apparently other programmers in the NPM P2P space also faced a similar need: https://github.com/node-on-mobile/node-on-android
I am new to Angular2. What all important topics I need to cover to have better understanding and be able to practically use Angular2 in some project
Could you explain how is be an open source hacker, please? Some more details about hacking and how to become someone like you. Thks.
After leaving my previous job, I became self-employed and most of my time goes to building open source, so I wanted to find a suitable title. I make a living by: teaching open source tools (in Egghead.io or in private workshops) and building open source tools (through OpenCollective backers).
The "hacker" part is about doing what you're not "supposed" to do. I want to find ways to do open source even when people expect closed source software, because I believe closed source software is an ingredient for corruption. One (not the only) reason why people's privacy's and freedoms are abused by tech giants and 3-letter institutions is due to massive closed source systems. I want to build a better future and one small way is to provide transparent software.
How WebComponents and Cycle.js integrate with each other? WebComponents community is moving very slow, So push from one framework community will give it more momentum?
You can use Web Components inside Cycle.js apps. I've done that in a project and it's running well in production. That's the promise of WCs: they should just work, like other normal HTML elements.
On the other hand, there is wrapping Cycle.js apps as WCs so you can use them in other frameworks. I made a simple library for this: https://github.com/staltz/cycle-custom-elementify/ which is still experimental, and if we have enough time we will try to improve that approach, together with the core team in Cycle.js.
Thanks for doing this AMA. Here's my question:
What are you most likely doing when you're NOT in front of a computer?
What inspired you to start the scuttlebut project? and why has the focus not been on mobile and usability? Do you see any possibility of scuttlebut being mainstream, and not just being used by esoteric techies?
I wrote a blog post about why I joined (not started) the scuttlebutt project: https://staltz.com/my-last-day-and-my-first-day.html
Basically the motivation is panic: we are losing our internet. It's not ours anymore, and it's becoming something else. It's time to build something else, from ground up, which guarantees it belongs to us. No one owns the oxygen in our planet, it's for free and belongs to everyone. So is interpersonal-communication, it should be for free and belong to whoever is speaking, only. Facebook is a threat to that, today and in the future.
and why has the focus not been on mobile and usability? Do you see any possibility of scuttlebut being mainstream, and not just being used by esoteric techies?
I joined the project to bring it to mobile and with a focus on good usability. We have plans for bringing it mainstream, it's not going to be just for techies, for sure.
What's your thinking about Phoenix as a backend solution and have you found it to work well with RxJS features such as observables?
Is there a clear path for using stateful animations with Rxjs and Angular 2's Onpush Change Direction strategy?
I would flip that question around: how are we supposed to learn anything when we're supposed to get so much work done?
Think of programming as an iceberg. The tip is the visible part, and it's just 10% of the iceberg. The invisible part is 90%.
Actually shipping code that delivers features is just the visible part of programming. If managers focus too much on only that visible part, you end up producing a lot of code. And actually, code is a liability, not an asset. Think about it: if I give two options, project A is 100 lines of code and delivers a tetris game, and project B is 10k lines of code and delivers the exact same thing, which would you pick? Or: if you ask me where do I live, do you prefer "Foobar Avenue, 123", or do you prefer a 15 page document explaining each single step how to get there?
I think coding is an activity that constantly requires taking a break and rethinking the strategy. Of course there is a lot of "just getting things done" involved, but we shouldn't think that it's just that. Programming is learning. It's learning how to solve the problem at hand while optimizing user/customer experience (through various metrics such as lack of bugs, speed of feature delivery, performance, etc).
Is cycle-React-Native ready for production ?
Hi! What's the best way of using patchwork on multiple devices? Use same profile name on each device, follow same accounts etc. Or what would you suggest?
Do you matter in someway how to involve more Brazilians into the IT world ?
How do you think cycle.js would do in a project where it uses a plugin architecture as one of it's main features? Each plugin must be it's own independent world, and must be able to be loaded from an external source.
I have kind of a weird question, I read about cycle.js ~2015, I actually do enjoy some of the concepts of cycle more than react. But as always business dominated and I mainly use react except for my private projects where I use cycle, aurelia, angular and some old weird stuff I once wrote. I like concepts and ideas more than dogmas.
To the question .... It's a bit weird, I know and I apologize up front, but in the article/presentation I read about reactive concepts in cycle.js there was a paper from a ?french? CS-Student, who wrote about actors and issues of SPLs.
Do you by any reason remember that presentation ? and if you do could you post me the link ?