THIS is how to code declaratively in Angular @JoshuaMorony

Joshua Morony Angular and declarative code are not always the closest of friends, the StateAdapt library aims to make managing state declaratively in Angular much easier.

State Adapt: state-adapt.github.io/angular
Mike's YT channel: youtube.com/@UCiPDBcPWl9yswuULEZMosZw
More on declarative code: youtube.com/watch?v=sIeTGWSUK7M
Source code: github.com/joshuamorony/quicklist-state-adapt

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:55 What is StateAdapt
1:35 Data sources
2:16 The store
3:03 Adapter
3:49 Isn't this Redux/NgRx?
5:57 Conclusion

#angular #reactivity #stateadapt

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

updated 3 years ago

THIS is how to code declaratively in Angular

Joshua Morony 2023-06-07 | Angular and declarative code are not always the closest of friends, the StateAdapt library aims to make managing state declaratively in Angular much easier.

State Adapt: state-adapt.github.io/angular
Mike's YT channel: youtube.com/@UCiPDBcPWl9yswuULEZMosZw
More on declarative code: youtube.com/watch?v=sIeTGWSUK7M
Source code: github.com/joshuamorony/quicklist-state-adapt

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:55 What is StateAdapt
1:35 Data sources
2:16 The store
3:03 Adapter
3:49 Isn't this Redux/NgRx?
5:57 Conclusion

#angular #reactivity #stateadapt

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

How to ACTUALLY switch from VS Code to Neovim

Joshua Morony 2023-09-06 | Vim is notoriously hard to use if you are not familiar with it, but people also go on about how great it is. It took me a few tries, but this video details how I managed to finally make the switch to neovim from VS Code after some failed attempts.

TJ's Lua Snips video: youtube.com/watch?v=Dn800rlPIho
The Primeagen: youtube.com/@UC8ENHE5xdFSwx71u3fDH5Xw
My previous video that discusses neovim: youtube.com/watch?v=P5QPacz2-ao

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:58 Step 1: Do you really want this?
1:17 Step 2: Vim Extension
2:14 Step 3: Neovim setup
3:07 Step 4: Neovim Extension
3:35 Step 5: The Terminal
4:23 Step 6: Experiment
4:58 Outro

#neovim #vscode #vim

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Testing SMART components and SERVICES with Signals and RxJS

Joshua Morony 2023-08-30 | We've already looked at how to test "dumb" components, now we are going to look at how to test how those components are integrated into the application using smart components and services.

Previous video: youtube.com/watch?v=c57llB8QA2E
Source code: github.com/joshuamorony/angularstart-quicklists

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:51 State management recap
1:31 How do tests fit in?
2:40 Smart component: inputs
4:03 Smart component: outputs
4:52 Testing the service
6:11 Not always this easy

#angular #rxjs #testing

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

I bet you can write an Angular UNIT TEST after this video

Joshua Morony 2023-08-23 | Testing is a huge and complex topic, but getting started doesn't have to be - focusing on testing just the inputs and outputs of your dumb components in Angular is a great way to get started with unit testing.

Setting up Jest in Angular: blog.angular.io/moving-angular-cli-to-jest-and-web-test-runner-ef85ef69ceca

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:52 Testing an Input
3:24 Adding another test
4:23 Testing an Output
6:30 Another test
7:20 Don't worry too much
8:19 Outro

#angular #unittesting

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Why does the average app kind of suck?

Joshua Morony 2023-08-16 | The most common counters I hear to the idea of declarative code are that imperative is a lot simpler and doesn't over complicate things. In this video, I provide some counters to that view point, and why declarative code might actually be the simpler option.

Mike's article: dev.to/mfp22/rxjs-can-save-your-codebase-49fi
More on declarative code: youtube.com/watch?v=sIeTGWSUK7M

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
1:09 Things kind of suck
2:33 Declarative is the *easier* option
3:23 An example
3:52 Always start declarative
4:34 Conclusion

#angular #declarative #reactivity

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

This solved a problem Ive had in Angular for years

Joshua Morony 2023-08-09 | Ideally, we want our data to be reactive right from the source, but sometimes we are just dealing with imperative APIs. RxDB makes it possible to have reactive local storage of data, and provides us with the power of a document based NoSQL database.

This video was sponsored by the RxDB team, but I had complete editorial and creative control over this video (including publishing with negative opinions if I desired).

More information on RxDB: rxdb.info/?utm_source=videos&utm_medium=youtube&utm_campaign=yt-joshua
Leave them a start on GitHub: github.com/pubkey/rxdb

Previous video on the Signals/RxJS state management approach: youtube.com/watch?v=44_IcGPKQ_M

Source code: github.com/joshuamorony/quicklist-rxdb

0:00 Introduction
0:14 The Problem with Storage
0:56 Reactive Storage with RxDB
2:31 Syncing to a Backend
3:22 Conclusion

#angular #rxdb #rxjs

There was a flaw in my Angular mental model

Joshua Morony 2023-08-02 | Keeping a reactive/declarative download flow of state in your application can make things a lot more predictable - but placing too much importance on the role of components in my application made maintaining this hard.

Source code: github.com/joshuamorony/signals-rxjs-demo-fetch

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
1:07 A problem
3:10 The solution
4:16 Conclusion

#angular #rxjs #signals

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Its OK/NOT OK to subscribe in Angular

Joshua Morony 2023-07-26 | When coding reactively and declaratively in Angular with RxJS, it's best to avoid subscribing... but why? and when is it OK to break the "rules"?

Previous video: youtu.be/R4Ff2bPiWh4
More on declarative code: youtu.be/sIeTGWSUK7M

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

0:00 Introduction
1:06 Upside of Declarative
2:06 Downside of Subscribe
3:21 When can you subscribe?
4:43 When to avoid subscribes?
5:00 Breaking the rules

Learn Angular with Ionic: ionicstart.com

#angular #rxjs

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Every uncommon TypeScript concept that is useful to me

Joshua Morony 2023-07-19 | I'm no TypeScript wizard but there are a few concepts outside of the basics that often come in useful for me. We will cover things like keyof, generics, unions, non-null assertion, utility types, and more.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:22 keyof and in
1:31 Generics
2:09 Unions
2:45 as
4:01 Non-Null Assertion
4:26 Utility Types
5:21 Lookup Types
5:57 Type guards

#angular #typescript

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Will this new signals approach ACTUALLY work?

Joshua Morony 2023-07-12 | Recently I introduced my new default approach to state management in Angular using Signals and RxJS. This video takes that concept and applies it to challenging situations that are often brought up by people, e.g: loading data from an API, filtering, handling errors and retries, and pagination.

Source code: github.com/joshuamorony/signals-rxjs-demo
Previous video: youtube.com/watch?v=R4Ff2bPiWh4

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:56 The Set Up
1:26 Loading from an API
1:56 Filtering
3:06 Errors and Retrying
5:39 Pagination
6:31 Conclusion

#angular #signals #rxjs

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

My NEW default for state management in Angular

Joshua Morony 2023-07-05 | With the introduction of signals, I wanted to find a new default state management pattern I could use that is simple, reactive, declarative and doesn't involve using any 3rd party libraries

Source code: github.com/joshuamorony/quicklist-default
State Adapt video: youtu.be/b687kMZDXTg

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:26 The declarative approach
1:17 No 3rd party libraries
1:57 State and sources
3:12 Updating state
4:07 Alternatives
5:35 Side effects
5:55 Conclusion

#angular #rxjs #signals

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

I spent YEARS optimising my workflow for coding

Joshua Morony 2023-06-28 | My coding workflow always just felt a bit meh, so I went down a bunch of different rabbit holes to create a workflow that is fast, efficient, and ergonomic. It's still not perfect, but it's a massive improvement on where I started.

- Moonlander/oryx config: configure.zsa.io/moonlander/layouts/m9zzx/latest/5
- Lazygit video: youtube.com/watch?v=WJj6pHoVuTg
- My neovim config: github.com/joshuamorony/nvim
- URLtown: urltown.io

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:29 Keyboard
1:50 Shortcuts
2:35 Terminal
3:56 Code editing
5:58 Web browsing
7:10 Conclusion

#angular #neovim #productivity

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Is Angular changing TOO much?

Joshua Morony 2023-06-21 | The Angular team have released yet another RFC detailing the proposal for control flow syntax in template that is similar in style to Svelte. On top of all of the other changes we have seen recently, all of the changes coming to Angular might seem like a bit much.

More on Standalone Components: angular.io/guide/standalone-components
More on the Signals API: youtu.be/4FkFmn0LmLI
More on Signal Based Components: youtu.be/dO6PyJqd3DI

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

#angular #signals #svelte

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

When over engineering with Nx in Angular pays off... URLTown Devlog #2

Joshua Morony 2023-06-14 | For my URLTown project I made heavy use of an Nx monorepo and the library approach. This video explores why I like to use Nx and specifically what benefits it gave me for this project.

Try URLTown (note this is an early alpha): urltown.io

More on Nx: youtube.com/watch?v=fR6jPnJZ6-I

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
1:29 Using an Nx monorepo
2:42 Using Nx libraries
8:05 Build tooling
9:17 Conclusion

#angular #nx #gamedev

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Angulars missing piece is coming...

Joshua Morony 2023-05-31 | We can already use signals, but what we have so far is really just a preview of what is coming. When signal based components are released, we will see the full power of the signal approach in Angular applications.

Signals/change detection video: youtube.com/watch?v=4FkFmn0LmLI
Signal based components RFC: github.com/angular/angular/discussions/49682

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

#angular #signals

0:00 Introduction
0:34 Signal based components
1:09 Zoneless change detection
2:31 Signal inputs
3:31 Models
4:33 View queries
4:55 Conclusion

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

RxJS isnt complicated enough... lets add State Machines

Joshua Morony 2023-05-24 | We take a look at how we can combine state machines using XState with a typical reactive state management flow using RxJS, Angular, and Signals.

Source code: github.com/joshuamorony/state-machine-error/blob/main/src/app/shared/data-access/posts.service.ts
Reactive error handling with signals: youtube.com/watch?v=54q7P9PB0WU

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

#xstate #angular #rxjs

0:00 Introduction
0:33 What is a state machine?
1:34 The scenario
1:56 Creating the types
3:04 Creating the state machine
5:48 Using the state machine with RxJS
6:33 Is it worth it?

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

My most unhinged idea yet... URLtown Devlog #1

Joshua Morony 2023-05-17 | I'll admit the idea probably sounds ridiculous, but it's actually pretty cool! I set up a 2D game world that you can walk around in and use it as a sort of "home page" for interacting with the web. There are various triggers throughout the world that can be used to launch a set of URLS, and you can use those to navigate between different tasks/workspaces.

Phaser tutorial mentioned in video (source of sprite): medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:29 The idea
1:50 How it works
2:12 An example
4:37 Conclusion

#angular #phaser #gamedev

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

The problem with going full declarative in Angular

Joshua Morony 2023-05-10 | Declarative code has a lot of great advantages, but to actually have a "fully" declarative codebase is hard if not impossible. This video explores how to make a component more declarative, and why "full" declarative is a problem.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

#rxjs #angular #declarative

0:00 Introduction
1:00 Full declarative
2:30 The problem with full declarative
4:00 Partial declarative is pretty good
4:52 Conclusion

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Is this how we will handle errors reactively with signals in Angular?

Joshua Morony 2023-05-03 | In this video we investigate the relationship between RxJS and Signals in Angular apps, and specifically a technique we can use to handle errors that is reactive and declarative.

RxJS reactive error handling: youtu.be/kb9CBd2c4uA
Source code: github.com/joshuamorony/signal-error-example
Implementation of toSignalWithError: github.com/joshuamorony/oss/blob/main/packages/signal-with-error/src/lib/signal-with-error.ts

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

#angular #signals #rxjs

0:00 Introduction
0:13 Pre-signals approach
0:39 Post-signals approach?
1:27 Error handling
1:57 The solution
3:35 Helper utility
4:35 Conclusion

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

What most devs dont get about declarative code (I didnt either)

Joshua Morony 2023-04-26 | Imperative code generally looks easier and more intuitive, whilst declarative code looks confusing and hard to maintain. But this misses the true benefit of declarative code, and the organised structure it can bring to your applications.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:22 An example
0:59 The problem
1:40 Why care about declarative?
2:31 Imperative vs Declarative
4:10 Not fully declarative
5:19 Conclusion

#imperative #declarative #rxjs

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

The first time AI has made me feel 10x more productive

Joshua Morony 2023-04-19 | ChatGPT gave me an idea for a game, ChatGPT built the game, and Midjourney generated all of the art assets for me.

This was a fun experiment to see what I could learn about using AI for game development, and revealed something interesting about the interplay between AI and pixel art.

Using Midjourney: youtu.be/p39ViCa6Smo
Pixel tool: giventofly.github.io/pixelit

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:42 The setup
1:30 The problem with Midjourney
2:09 Using Midjourney for pixel art
3:58 Benefit of pixel art
4:16 Conclusion

#ai #phaser #chatgpt

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

The end of Angulars service with a subject approach?

Joshua Morony 2023-04-12 | A "service with a subject" is one of Angular's most popular state management approaches, but what is this going to look like when signals become available?

Signals vs subject: youtube.com/watch?v=iA6iyoantuo
What is "declarative": youtube.com/watch?v=skOTEbGwncE

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:20 Service with a subject
0:53 Service with a signal
1:58 Async with subjects
3:53 Async with signals
4:37 Combining

#angular #signals #rxjs

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Why I decided to switch to the inject() function in Angular

Joshua Morony 2023-04-05 | Angular 14 gave us the ability to use the inject() function more generally in our projects, including replacing constructor based dependency injection. But is it a good idea to switch to it?

More on Dependency Injection: youtu.be/ZzC-hfYQXvQ

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

#angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

0:00 Introduction
0:54 inject() benefits
1:53 Inheritance
4:05 The problem with inject()
5:36 Conclusion

Why didnt the Angular team just use RxJS instead of Signals?

Joshua Morony 2023-03-29 | Angular is introducing a new reactive primitive to the framework called "signals", which have been a popular reactive implementation in other frameworks.

But, this begs the question: why didn't they just use BehaviorSubject which is already included in RxJS? This video explores that question.

Intro to signals: youtube.com/watch?v=4FkFmn0LmLI

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:46 Signals are better
1:22 Accessing values
1:50 Derived values
3:47 The diamond problem
5:46 Side effects
7:04 Conclusion

#angular #signals #rxjs

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

GPT-4 just did 85% of my work for me (why you shouldnt use it)

Joshua Morony 2023-03-22 | GPT-4 turned a task that would have ordinarily taken me around 40 hours into one that would take just a few hours. This is obviously a massive productivity boost, but I think we also need to be cautious about when and where we apply this technology in our every day lives.

The Primeagen on GitHub Copilot: youtube.com/watch?v=RDd71IUIgpg
Chau Tran's channel: youtube.com/@ChauTran

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:22 Doing my work
2:48 The problem
3:53 An example
4:25 Why not use AI for coding?
7:13 The human advantage
7:46 Outro

#gpt4 #ai #chatgpt

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

I built an entire app with NO FRAMEWORKS for Web, iOS, and Android

Joshua Morony 2023-03-15 | I came up with a silly idea for an application and built the entire thing inside of an index.html file with just vanilla JavaScript. I used Capacitor to quickly create native iOS and Android applications from the web source code.

Infinite Doodle on iOS: apps.apple.com/us/app/infinite-doodle/id1672483924
Infinite Doodle on Android: play.google.com/store/apps/details?id=com.joshmorony.infiniline&hl=en&gl=US

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

#capacitor #ios #android

0:00 Introduction
0:50 The idea
1:08 The code
2:13 Creating native apps
4:06 Conclusion

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

I used Angulars signals to build an actual app

Joshua Morony 2023-03-08 | I refactored one of my existing Angular applications that relied heavily on RxJS and observables, to signals. This made me change my opinion on what I think is the likely fate of RxJS integration in Angular.

Source code (signals): github.com/joshuamorony/quicklist-signals
Source code (observables): github.com/joshuamorony/ionicstart-quicklists
Previous signals video: youtu.be/4FkFmn0LmLI

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

#angular #rxjs #signals

0:00 Introduction
0:31 The application
0:56 What makes it declarative?
1:42 Refactoring to signals
4:06 What about RxJS?
7:03 Conclusion

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

I turned my trash Angular prototype into a legit app... RMC Devlog #2

Joshua Morony 2023-03-01 | In the most surprising and unforeseen twist, there is a Part 2 for my DevLog series on building a SaaS startup with Angular!

This one focuses on taking the existing prototype/MVP, throwing it in the trash, and rebuilding a better version from scratch using things like Test Driven Development and software design patterns/principles.

More about Nx libraries: youtube.com/watch?v=fR6jPnJZ6-I

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:59 The new version
2:19 Over engineered code
4:10 Replaying code with streams
7:21 Is all this necessary?

#angular #saas #nx

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Angular is about to get its most IMPORTANT change in a long time...

Joshua Morony 2023-02-22 | Angular just released a preview of a prototype for their own implementation of signals as a new reactive primitive for the framework. This will help modernise the framework, improve change detection, and provide a more consolidated learning journey for new Angular developers.

More on Zone.js: youtu.be/lmrf_gPIOZU
More on handling asynchronous reactivity: youtu.be/-CoVmNvp_1g
More on declarative coding: youtu.be/skOTEbGwncE

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:31 Signals
1:29 What is the point?
3:17 Reactive/Declarative
4:41 What about RxJS?
7:54 Why it's important
9:26 Conclusion

#angular #signals #rxjs

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Why you should try to solve challenging JavaScript problems yourself

Joshua Morony 2023-02-15 | Often our first instinct when we run into challenging problems in our projects is to seek out an existing solution or quick fix.

If we work on building the skills to push through these difficult situations, we will grow much more quickly as a developer AND we won't need to rely on others so much.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
1:26 Where do we begin?
2:58 Deep dive
4:48 Building a prototype
6:20 Using the solution
7:48 Getting stuck
8:17 A new solution
11:41 Conclusion

#javascript #svelte #sveltekit

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

The trick to make any IMPERATIVE code DECLARATIVE instantly

Joshua Morony 2023-02-08 | We don't have control over what 3rd party libraries do, and sometimes those libraries are going to have an imperative API. Here's a little trick you can use to keep your codebase declarative, but still utilise those imperative APIs.

What is "declarative"?: youtube.com/watch?v=skOTEbGwncE

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

#ionic #angular #declarative

0:00 The imperative problem
1:06 The trick
1:20 The declarative solution
2:29 Isn't it still imperative?
3:52 Conclusion

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

The most compelling reason to learn Angular in 2023

Joshua Morony 2023-02-01 | It turns out that Angular might be a little more popular than we all think, and the job opportunities for Angular might also be going unnoticed.

This video presents some compelling reasons for why you might want to learn Angular in 2023.

Blog post by Logan Dev: devjobsscanner.com/blog/the-most-demanded-frontend-frameworks-in-2022

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

#angular #frontend #react

0:00 An important lesson
0:59 Major framework usage
1:51 Angular jobs
3:03 Thoughts
3:40 The REAL reason

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Why you actually need RxJS (even if you dont realise it)

Joshua Morony 2023-01-25 | RxJS provides a way to explicitly handle asynchronous reactivity in your applications. This video explains what that means exactly, the difference to synchronous reactivity, and why the out of the box reactivity solutions Svelte and SolidJS might not be enough.

Source code: github.com/joshuamorony/svelte-pagination-example/blob/main/src/routes/search/%2Bpage.svelte
What does declarative mean?: youtube.com/watch?v=skOTEbGwncE

P.S. The clip of the daedric prince in the video is from the fan made Skyblivion mod - check it out if you're an Elder Scrolls nerd!

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:30 RxJS vs Svelte vs SolidJS
1:18 Drama repellent
1:56 The problem
3:17 The killer feature of RxJS
4:50 RxJS example
5:59 Conclusion

#rxjs #reactivity #svelte

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Angular developers can learn Svelte so fast...

Joshua Morony 2023-01-18 | It turns out that a lot of the concepts and APIs of Angular and SvelteKit are quite similar from a developer perspective, which means the leap for Angular developers to learn SvelteKit is reasonably small.

This video takes a look at some of the similarities.

Svelte tutorial: https://learn.svelte.dev/tutorial/welcome-to-svelte
Tim's blog post: https://timdeschryver.dev/blog/unlocking-reactivity-with-svelte-and-rxjs

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:54 Routing
1:34 Colocation
2:13 Components
2:46 Shared code
3:09 Services
3:59 Interpolation
4:16 Lifecycle hooks
4:26 Inputs and Outputs
4:43 Events
5:17 Reactivity / Change detection
6:25 RxJS integration
7:30 Two-way data binding
8:16 Conclusion

#svelte #sveltekit #angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

The easier way to code Angular apps

Joshua Morony 2023-01-11 | Ever hear about "declarative" coding or "reactive" coding? These are concepts I struggled to properly understand and appreciate for a long time. This video aims to give a brief explanation that gets right to the heart of what this is all about and why it is beneficial.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
1:38 What is declarative?
3:57 Why observables?
4:24 This is still imperative
6:06 Declarative version
7:54 The benefit
8:23 Imperative is not bad

#ionic #angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Can AI explain the most challenging Angular concept?

Joshua Morony 2023-01-04 | I set out to make a video explaining the specifics of how dependency injection works in Angular. But then I started to wonder if ChatGPT could do a better job at explaining it than me.

So, now this video is a competition between myself (a Google Developer Expert for Angular) and ChatGPT.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:46 The challenge
1:39 (Josh) What is dependency injection?
2:43 (ChatGPT) What is dependency injection?
4:31 Q1 Analysis
4:37 (Josh) What is a token?
5:25 (ChatGPT) What is a token?
7:09 Q2 Analysis
7:36 (Josh) What are injector trees?
9:40 (ChatGPT) What are injector trees?
11:04 Q3 Analysis
11:21 (Josh) Resolution modifiers
12:22 (ChatGPT) Resolution modifiers
15:08 Q4 Analysis
15:25 Final score
16:06 Conclusion

#chatgpt #angular #ai

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

WTF is a HOT observable?

Joshua Morony 2022-12-28 | There seems to be some kind of important difference between "hot" and "cold" observables, but trying to grasp what that difference is can be confusing. This video aims to make hot observables easier to understand.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:31 The Observer Pattern
1:59 Hot Observable (Subject)
4:18 Cold Observable
6:15 Recap
6:33 In RxJS
8:10 Gotchas

#ionic #angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Now AI is DESIGNING my entire app in minutes...

Joshua Morony 2022-12-21 | The Midjourney AI can generate some pretty impressive mobile app user interface concepts. In this video, we see what is involved in taking one of those concepts and converting it into an actual application.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com
Source code: github.com/joshuamorony/ionic-ai-theme

0:00 Introduction
0:30 Using Midjourney
1:42 Using the assets
2:39 Creating a colour palette
2:59 Coding the application
4:28 Difficulties
5:20 Thoughts
7:43 Conclusion

#ionic #angular #ai

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

The easy way to GIT like the pros

Joshua Morony 2022-12-14 | Git is powerful but it's also hard to mentally picture what is going on and you never quite know if the command you're about to run is going to wreck your whole day.

This video introduced lazygit and the more powerful Git workflows it has allowed me to add into my day-to-day work.

Lazygit: github.com/jesseduffield/lazygit

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:41 Lazygit
1:36 Staging files
2:05 Managing branches
2:31 Managing commits
3:40 Super power: Committing hunks
5:00 Super power: Squashing
6:00 Super power: Reordering
7:55 Conclusion

#git #lazygit #angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

ChatGPT just built my entire app in minutes...

Joshua Morony 2022-12-07 | I asked ChatGPT how to create a todo app in Angular and it provided me with an unexpectedly accurate answer. With very little input from myself, it was able to provide the code for the entire application.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

Source code: github.com/joshuamorony/gpt-todo-app

0:00 Introduction
1:02 Creating a component
1:35 Creating a form
2:40 Displaying todos
3:24 toggleCompleted and ngClass
4:00 Deleting and final touches
4:58 Something harder?
6:28 ChatGPT vs CoPilot
6:52 Thoughts
8:53 Conclusion

#angular #chatgpt #ai

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Can Angular apps be cool again?

Joshua Morony 2022-11-30 | Angular hasn't been "cool" for a long time - it's generally seen as the framework for large enterprise style applications, not for fast moving startups disrupting industries. But, Angular has changed quite a lot lately, which begs the questions... could it ever be "cool" again?

Source code: github.com/joshuamorony/angular-notice-board

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:27 Old school
0:45 New school
2:30 Real world app
3:34 Routing and Layout
5:08 Dashboard feature
5:48 Data and Services
7:08 Create feature
7:50 Can Angular be cool?
9:41 Conclusion

#angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

I built my startup with Angular... RMC Devlog #1

Joshua Morony 2022-11-23 | I built a new tool with Angular for replaying code snippets, and this video talks about the process of creating and deploying an MVP for that tool.

Check it out here: replaymycode.com

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:39 What is it?
1:04 The MVP
3:43 Project Structure
5:30 How it works
8:07 Unnecessary feature
9:44 What next?
10:56 Conclusion

#ionic #angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Is reactive code with RxJS too hard to test?

Joshua Morony 2022-11-16 | In this video, we discuss whether using RxJS and observables to create reactive code makes writing automated tests for that code harder. We look at some specific examples, and show how the observer spy library can be used to make testing observables easier.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

More on TDD: youtube.com/watch?v=vzgouJbyum0
More on Component Store: youtube.com/watch?v=gYzAhW_glqc

0:00 Introduction
0:47 Observer Spy
1:40 Dumb components
2:59 Smart components
4:31 Services
5:24 NgRx Component Store
7:16 Complex stream
10:59 Ionic Start
11:34 Conclusion

#ionic #angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

WTF is Zone.js and is it making your app slow?

Joshua Morony 2022-11-09 | Zone.js is included in every Angular application and it is a critical part of change detection, but it also leads to your application doing way more rendering work than it actually needs to.

In this video, we explore what exactly Zone.js does, why we need it, how we can work around it, and why it might be becoming optional in the future.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

More on OnPush Change Detection: youtu.be/tWy8zaWvkvk

0:00 Introduction
0:27 Component Tree
2:06 What does Zone.js do?
2:59 Default Strategy
4:25 OnPush Strategy
8:16 Async Pipe
10:10 RxAngular

#ionic #angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

RxJS made my code 5x shorter... but is it better?

Joshua Morony 2022-11-02 | I often get comments that the reactive code I create with RxJS is overcomplicated and would be easier without RxJS. This video compares a reactive/declarative solution built with RxJS versus the same feature built imperatively without RXJS.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

Reactive source code: github.com/joshuamorony/ionicstart-snapaday/blob/insta-story/src/app/slideshow/slideshow.component.ts
Imperative source code: github.com/joshuamorony/ionicstart-snapaday/blob/without-rxjs/src/app/slideshow/slideshow.component.ts

Video on pausing the stream: youtube.com/watch?v=mI8kH1_mEtw
Original video on slideshow: youtube.com/watch?v=tWy8zaWvkvk&t=0s

Video on using the expand operator: youtube.com/watch?v=aKsPMTP6-sY

0:00 Introduction
1:00 Reactive Approach
2:17 Imperative Approach
4:11 Is Reactive Better?
6:11 Bonus example

#ionic #angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

WTF is modern Angular development?

Joshua Morony 2022-10-26 | What is modern Angular development? This video breaks down the five key areas that I think constitute modern angular development and why I think they are important.

Get a LIFETIME MEMBERSHIP for Ionic Start: ionicstart.com

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Other videos:

The benefits of OnPush: youtube.com/watch?v=tWy8zaWvkvk
Smart and Dumb Components: youtube.com/watch?v=9QU_GzcU184
Nx style colocation: youtube.com/watch?v=7SDpTOLeqHE

0:00 Introduction
1:22 Ionic Start
1:51 OnPush Change Detection
3:39 Smart/Dumb Components
4:53 Reactive Coding
7:15 Standalone/SCAM
8:12 Code colocation
9:36 Conclusion

#ionic #angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

The secret to understanding piped operators in RxJS (Advanced)

Joshua Morony 2022-10-19 | In this video, we talk about why considering the subscription flow of RxJS operators upward can make understand what is going on in streams easier.

Previous video: youtube.com/watch?v=mI8kH1_mEtw

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

0:00 Introduction
0:36 Downward flow
2:51 Upward flow
4:25 Nested pipes
5:36 A practical example

#ionic #angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

The hidden gotcha with async in Angular forms

Joshua Morony 2022-10-12 | In this video, we talk about some of the gotchas and pitfalls to using OnPush Change Detection and Reactive Forms in Angular. This includes dealing with an async validator and changing the status of forms as the result of an asynchronous operation.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

Source code: github.com/joshuamorony/angular-onpush-reactive-forms

- Previous OnPush Change Detection video: youtube.com/watch?v=tWy8zaWvkvk
- Should we really NEVER subscribe in Angular apps?: youtube.com/watch?v=WvMxnGfqEis

0:00 Introduction
0:41 Recap of OnPush CD
1:33 Async Validator Example
3:19 Solving with the async pipe
4:34 Other problems with async
6:15 Using ChangeDetectorRef
7:17 The trick
10:03 Conclusion

#rxjs #angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

Knowing this makes Angular typed forms WAY less awkward

Joshua Morony 2022-10-05 | Is the TypeScript compiler complaining about your form values being potentially null or undefined? This video demonstrates the simple solution.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

Type guard video: youtu.be/1rgr8Ip_cfE

0:00 Introduction
0:38 The situation
1:10 nonNullable forms
2:25 getRawValue
4:23 Conclusion

#angular

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony

RxJS makes everything easier (Instagram story pausable stream)

Joshua Morony 2022-09-28 | We take some existing functionality that uses RxJS to displays a stream of photos in a slideshow, and modify it to include the ability to tap to pause just like Instagram stories.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: ionicstart.com

Previous video: youtube.com/watch?v=tWy8zaWvkvk

0:00 Introduction
0:56 Preview of the result
1:30 Create a stream of photos
4:46 Pausing the stream
6:37 Conclusion

#ionic #angular #rxjs

- More tutorials: eliteionic.com
- Follow me on Twitter: twitter.com/joshuamorony