Exploring new Technologies
This is my second post regarding my experience in London as a Web developer. To know more about me, to know my story, how I became a Web Developer click HERE.
The graduation day has passed. After the graduation you might think you can finally relax, calmly study, explore London but… no!
The war is open. You have to find a job and get ready!
What have I been up to?
Since the end of the course. I practised with technologies I’ve explored during Makers Academy; such as React, ExpressJS, MongoDb, WebSocketJS but also preparing for interviews. There is never enough time to fully complete either of those activities. You always wish have more time for studying, learning from Udemy course or practising.
In the last period, I felt ready to explore new technologies to expand my knowledge and be given new challenges. I decided to play around with technologies I always heard about, Swift and Angular.
Swift is a compiled programming language developed by Apple for iOS, macOS, watchOS, tvOS, and Linux. Angular (commonly referred to as “Angular 5” or “Angular 2”) is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations.
Swift
I have always been fascinated by building mobile applications and thus, Swift is one of the technologies which does that. I wanted to learn something that was also outside my skill Set so yes, I could have chosen React Native but believe Swift was really out there to reach.
To take the first steps to learn this new language I followed a Udemy course and the official Swift documentation.
Udemy is a great platform to get you to learn the foundations through building projects. It’s a method that makes you feel you are producing solid outcomes whilst learning along the way. After all, it gets really dense when you type in theories without having to execute them.
So, I started with this first project:
What is your age?
The purpose of this app is to calculate your age based on your birth year. You input the year you were born, click the button and voila, it shows you you’re age. Might be useful if you forgot how old you are!
To develop I had to use a new IDE, XCode. The development is quite different that what I was used to. Normally, I would use ATOM. Although, the management of UI is totally different!
Coding with HTML, CSS and REACT, I had to produce the outcome of each element by coding. In XCode, you can select your element(texture, button etc) and drop in on the user interface. In addition, you can use a menu to change the colour, font-size, position, etc.
For the start, it seemed a bit confusing. I suppose if it’s a more creative software like Photoshop, it makes sense but I hadn’t really used many creative softwares.
Then I got to code. In this app I had to let happen an event when a button was clicked. What is cool is that you can just select your element for the UI and connect it in your ViewController.swift file where the code happens. Then from there, you can create your variables and methods.
One of the main difficulties I found in creating an app that looks good independently, in dependant of which device you use. In fact, the mobile phone screen’s size might depend on the device and your elements might then not be in the right position. For example, the “Find age” button, in a Iphone5S was getting too small and the written wasn’t showed.
Though, I sorted it out just reducing the the font’s size.
Considerations
Develop a simple mobile app using Swift has been quite fun and satisfying. The management of the User Interface seemed easier given is not necessary to code for building it. At the same time the Menu hide a lot of functionality that can’t be grasped so quickly. In addition, the possibility to link easily the UI elements with the basic logic make XCode an interesting tool.
Exploring and developing in Swift has been fun and is a technology I would like to know more.
Angular
My first love will always be React no matter how similar these two may be. However, I wanted to have a go to the alternatives such as Angular, one of the most popular front-end libraries. I wanted to get an idea of how Angular is similar with react but in a different way. Thus, I wanted to give Angular a chance to catch my interest the same way React did.
The permissions nightmare.
My experience with Angular was not all too bad. It didn’t have many troubles at all except for one thing. I had a a very bad experience with installing Angular. For some reason, I couldn’t install it because my permissions for my NodeJs was set differently. Then, very wisely(joking) I followed a guide to sort out the problem, which ended causing more issues and with the need to format my laptop.
What happened?
Basically, on my laptop for installing packages globally I had to use the command sudo, which didn’t allow a correct installation of Angular. On GitHub, several developers advised to follow the point 2 of the following guide (https://docs.npmjs.com/getting-started/fixing-npm-permissions). Initially everything was working fine but after I restarted my laptop, several commands such as ‘ng and react’ started to do not be recognised anymore: command not found. Thanks to the help of the fantastic coach Kay this issues has been sorted out, but few warning and errors still came out then under her advice i reseted my loved Macbook.
After this beautiful adventure and after I set up again all my dev environment I decided to have another go to install Angular, that time with success, it couldn’t escape from me.
The App — Tour of Heroes
Following the Angular documentation I built a Web App called Tour of Heroes. It sounds cooler than it is. All it is, is an app that shows a list of heroes which you can select and then edit the name. Despite it is a simple Web App include the basic event you would put in a project.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
[Yes, I am a hero]
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Building it I had the opportunity to understand the basics:
- Styling an Angular component
- Using two way data binding with the ngModel directive
- On click events
- map a TypeScript list in the HTML file
- Use and if statement in the HTML file
- Learn how Angular and type script work together
One familiar thing that I’ve found is that Angular as well as React has components, which are like bricks of your applications.
By default, the Angular project has the app component to render. Then inside it I could put your other components and build your app.
The app component came with few files ready for me:
- A CSS file
- A HTML file to write the html code will be rendered by Angular., it’s HTML not JSX.
- Spec. Test environment
- .ts file= the component class code, written in TypeScript.
From my humble point of view I’ve found Angular less friendly. Perhaps it could be because of Typescript, which initially was a bit confusing given the unique syntax. It is quite different to normal vanilla javascript and suppose it was something I was not used to.
Angular is indeed a library I would use again but for the moment React stays my one true love.
My exploration so far. Was it worth it?
It is always good to learn new languages or libraries, especially through projects. It not only trains your brain to adapt to other ways or writing code but shows you what’s in the market out there. It hones in on why you love certain softwares and trains a strong quality a developer has:
To go out of your comfort zone for learning.
If you can do something that you usually don’t do,
