In February of 2021, I started my first programming job as a part-time Junior React Native Developer! (🎉)
The company is called WorkoutMe and its iOS app allows people across the world to do live workouts together. (Think Zoom, but for exercise. 💪)
My first month had been a blur of discovery, so I wanted to take a moment to document some of the things I learned during that time.
10 Things I've Learned
1. React Native
2. Onboarding Matters
3. Linting Code
4. 15 Minute Troubleshoot Rule
5. Cross Workflow Naming Conventions
6. Ongoing Progress List
7. Tracking Time: Production Vs. Learning
8. Jetbrains PHPStorm IDE
9. Using Aliases For Importing
10. Structuring Array/Object Data
1. React Native
Fun fact, before this job I've never used React Native before. 😲
I was definitely nervous about jumping into a mobile-only environment and what seemed like a new language.
(I have used React extensively before, but there are many differences between coding for the web vs mobile applications.)
To help prepare I read through the React Native documentation and purchased an in-depth React Native Udemy course, which I am still working through.
Discovery 💡
I am learning more "on the job" than through Udemy courses.
By trying to solve project-specific issues, I'm reading the documentation in a targeted way. This is actually making the research less overwhelming.
Courses are still beneficial, but I am starting to use them now to "fill in the gaps".
2. Onboarding Matters
I'm very grateful for the onboarding process at WorkoutMe, as I feel like it is setting me up for success.
Discovery 💡
Each project was designed to incrementally introduce me to different parts of the app.
Project 1:
Move all hardcoded front-end text into a JSON file and reference them with a localization helper function. (For future multi-lingual support.)
This made me review almost every major component in the codebase, with purpose. As a result future edits seemed familiar.
Project 2:
Change the layout of several onboarding screens to utilize buttons instead of interactive bars.
This exposed me to React Native core components like <View> and <TouchableOpacity>, without worrying about creating new logic.
Project 3:
Create several screens from scratch based on a provided design and have them display data from the backend.
This introduced me to more complex RN components like <SectionList> and required new front-end logic for processing backend user data.
There were still many moments where I thought:
"How in the world am I going to build this? 🤔 I can't even get the emulator working. Also...what is an emulator again?" 🥲
The great thing is that with each project's pull request came recommendations and corrections from my supervisor. His feedback was invaluable to helping me learn and start the next project correctly.
3. Linting Code
On my first pull request review, my supervisor chuckled while looking at my code and said "you have a different coding style than us, have you ever used a linter?" It was a very nice way of saying "your code is a mess". 😂
He showed me how to install ESLint, which analysis the code as I write it and enforces best practices specific to React Native.
Discovery 💡
Most of my code was highlighted in red! I was shocked by how different it was from the standards my new team used.
I quickly learned to love ESLint. Among other things, It makes sure we all use double spaces for indentations, warns against whitespace, and even simplifies some of my code.
My next goal is to learn what it is catching and start making a habit to code in that style and avoid those errors in the first place.
Want to learn more?
4. Cross Workflow Naming Conventions
Speaking of staying consistent...
Discovery 💡
No matter the platform, each issue/feature is named the same.
1 — A new issue/feature is added to our project management software Jira and is given a code and a name.
Example: DEV-120 Onboarding Screens
2 — In GitHub, a branch is also created called dev-120-onboarding-screens.
3 — Whenever I make commits to that branch I start each message with the code.
git commit -m "DEV-120 Add button layout"
4 — Lastly, when I track my time for this project, I can include this code in the timesheet. (I'll speak more about this below.)
All of this helps keep communication and organization of what is being worked on clear across multiple platforms and team members.
Learn More About Commit Messages
5. 15 Minute Troubleshoot Rule
I sometimes encounter errors I never heard of or glitches that there is no error message to even Google about. I can easily spend hours trying to solve them.
On one project, I spent over an hour trying to figure out how to make a progress bar have a gradient.
It turns out that this is a very complex thing to do with the package we were using and our designer was actually ok with us just using a solid color.
Discovery 💡
It's important to not get stuck on single issues and instead ask informed questions about them later on.
If a problem starts taking more than 15-20min to solve I now write out the issue and what I have done to troubleshoot it.
Asking my supervisor for help allows him to guide me, change the direction or approve my taking another stab at it.
Learn More About Not Getting Stuck On Bugs
6. Ongoing Progress List
As I am working through projects, questions are bound to come up for my supervisor. We also work in two different time zones, so he isn't always online for quick feedback.
Discovery 💡
It is quicker to document questions and suggestions as they come up, instead of at the end of my shift.
Every time I finish a major feature, run into a complex bug or have a suggestion — I add it to a numbered list. This way I don't have to remember all the points after a few hours of coding. And he can easily respond to individual points as needed.
Example:
// List To Supervisor
1 — Pushed list change progress to branch DEV-82.
2 — Is it important that the dividing lines have space on the ends or can they go to the end? (Screenshot)
3 — Do you know if there is a way to apply shadows to a single group of items in a <SectionList>? I couldn't find anything in the docs or after googling around for a bit.
4 — Currently the video button just has a generic function that runs a console log. At this point did it need to anymore?
5 — Should I break-up the code in <AwesomeListComponent> into sub-components or is it fine as is?
// Supervisor Response
1 — Great.
2 — Yes, please add the space at the ends.
3 — Let's actually move away from using the shadow. Here is a different approach from the designer.
4 — This works for now.
5 — Let's keep it to one component for now.
7. Tracking Time: Production Vs. Learning
I found it incredibly helpful to track my time using a tool called Harvest.
Discovery 💡
Track time in two different buckets. One for time spent coding and another for time spent learning.
It can be a little bit disheartening to feel like I spent the whole day on tutorials and barely got any "real work" done. But by tracking where my time is going, I can also track my growth.
One of my first big projects at work I spent an astounding 81% of my time on tutorials and research. Only 19% went to actual shippable code.
I was bummed, but it made sense. I never used React Native and barely touched the codebase before, so every step required some form of education.
By my 3rd big project, I went up to 65% of time spent on shippable code and only spent 35% researching solutions.
Seeing the trajectory of my time spent more towards bringing the company value, helped me feel a lot more motivated.
8. Jetbrains PHPStorm IDE
I'll probably write a whole separate post about this one. But let me just say that switching from Visual Studio Code has been an amazing experience.
My supervisor recommended I look into Jetbrains WebStom IDE since that is what our team used. It would make it easier to collaborate and it has been a favorite of his for many years.
I opted for PHPStorm since it has all the same features as WebStorm and adds many great additions for working with WordPress.
Discovery 💡
Out of the box PHPStorm allows me to spend more time on coding and less on making things run, commit or configure correctly.
I love the built-in panels for working with GitHub and running different emulators with React Native. All without plugins and typing lengthy commands in the terminal.
I especially love the local history feature that lets me restore any deleted code in a file. It's also pretty cool how it generates React components from parts of larger code, with one click. 😄
9. Using Aliases For Importing
I love learning new ways to write less code! 😁
Discovery 💡
Importing via aliases requires less "pathing" code and no manual refactoring when files are moved.
Regular Import Pathing
import icon from require('../../../../assets/icons/icon.svg')
Alias Import Pathing
import icon from require('@assets/icons/icon.svg')
Basically, this is a little configuration feature with Webpack, where you can specify specific folders it should look within.
In the above example, we just need to specify /@assets/ in the require() and Webpack will start pathing from that directory. It doesn't matter where in the src folder the component we are making the import from is located.
(This is achieved with configuring the resolve.alias setting.)
10. Structuring Array/Object Data
In my past projects, I didn't really need to worry about how my data was stored. Typically I had a bunch of uniform objects in an array. Each object had a unique id and some data I wanted to use in my app.
const DATA = [
{
id: 'asd',
name: 'Gedalya Krycer',
hobby: 'Hiking'
},
{
id: 'dsa',
name: 'Graciella Krycer',
hobby: 'Writing'
},
•••
]
Discovery 💡
When structuring data within arrays and objects, take some time to consider where it will be used.
Take for example the <SectionList> component. It allows you to "map" through data and create groupings of elements.
Between these groupings, you can add a header. Imagine a table that between every few rows there was a bold green header row.
For this to work, the data array needs an object for each group. Within the group object, it stores a title key/value pair and a data array.
The title holds the information that goes in that header.
The data holds the information that goes in the main sections.
const myData = [
{
title: 'This is the headline',
data: [
name: 'Peter',
phone: '(012) 345-6789',
],
},
{
title: 'This is a different headline',
data: [
name: 'Jill',
phone: '(987) 654-3210',
],
},
]
Without this special formating, the won't render the information correctly.
Thanks for reading!
That concludes 10 things that I learned during my first month working as a Junior Developer.
I hope you took away something important... I didn't have to know everything about coding on day 1.
There is a lot of opportunities to learn while working on projects. With great direction from my supervisor, taking the time to practice, and googling a lot, I am growing more every day.
So I encourage you to keep applying and going after the jobs you think are interesting. You might be a better fit than you think. 👍
If you are interested in a fun workout, check out WorkoutMe for iOS. 🏃
All images are designed with Figma
Top comments (20)
Dude you are rocking it🏄♂️ I am really enjoying your content.
As someone who always been an indie developer and wanting to join a 👨💻team to grow and learn more. This article has some great insights that helped me thanks 🙌
So glad you found it helpful! That is great to hear. Keep coding on!
Great article, I learned a lot from your post, Thanks,
By the way, one small typo here:
The data holds the information that goes in the main sections.
Oh, thank you! Yup totally should be an array instead and the name of the component in the paragraph above wasn't showing up either. 🤦
Both are now fixed. Good catch!
This interesting: "Track time in two different buckets. One for time spent coding and another for time spent learning."
Is there any way to integrate tools like Harvest with editors, browsers and shells so that I don't have to stop what I am doing to start/stop a timer? If yes, which integrations do you use and how does the tool track idle time like disappearing to go on a phonecall, kitchen, etc?
I do believe there is a an integration with Trello. I don’t really like it though.
I use their desktop app, as it puts a start/stop button in the top Mac OS toolbar. This makes it very easy to change timers.
Anything that isn’t coding related (phone calls, rest room breaks, etc) I will pause the timer.
Shortcuts can help.
Keep blogging, not only you are good but you are good at writing too.
Nice, that is a great find. And thank you so much, that is so encouraging to hear!
I loved your article! I'm also starting out as a Junior but your experience is very different from mine, specially because I don't get any support or assistance from my team as you do. But still, I can use most topics to create VERY helpful habits for myself and future opportunities. Thank you very much <3
Congratulations on starting out as a Junior Developer as well! Hang in there! Forging your own way can be tough (had a few jobs like that myself) but growth built from perseverince is also very valuable. It can definitely lead to better jobs with healthier cultures in the future.
Great insights! It's really helpful to hear about which processes and problems are utilized more frequently on the job than others.
I am so glad you found it helpful! :)
This article made me think of myself, where am I and what am I doing, learning ?
Thank you! You're great as you're!
Thank you so much! Keep it up too!
Good one!!
Thanks!
Excellent article. And really good progress
Thank you!
Impressive I enjoyed reading this article.
Thanks, so glad you enjoyed it!