What can happen in a year after Code in the Woods?

Last year I got to spend an amazing week in a mansion with incredible people. The perfect excuse was called Progressive Web Apps. It could just as well have been Python, Ruby, Java, JavaScript, R, or any of their frameworks – as long as I was concerned. I just wanted to learn to code.

This is what I call globalization!

Hmmm, my experience by the time I got on that bus to the Code in the Woods was RailsGirls. It is a one-day programming event with Ruby on Rails for girls who are complete beginners in programming. An incredibly cool concept from the wonderful kids’ book author Linda Liukas! As none of these events were available in Finland at the time, I attended one in Stockholm. The funny thing was, that the girls organizing it came from Tel Aviv, Israel. So a Finnish concept taught in Sweden by Israeli girl programmers. This is what I call globalization!

Watch out for the total Newbie! 

In Stockholm, I was tipped about Pink Programming; a Swedish community that organizes code camps for girls in Sweden. So, in July I got to explore the South of Sweden and learned Java in Swedish! There we had three full days for programming. So, altogether 4 days of programming. Thus, you can understand my enthusiasm, when I got the news that I’ve been accepted to the Code in the Woods! 

We did win the team competitions at least!

At the time, I had no idea how Git, GitHub, terminal, APIs, JSON-files, React – or to be honest HTML or CSS really worked. But my incredible team and the coaches bared with me. I hope I at least brought some value to the business side or the project management. We did win the team competitions at least! We made an app that lets you search for your favorite movies and actors, and check whether anything from them is available in Yle Areena at the moment. And if they were, you could watch the movie – for free! Only in Finland though.

A year after…

Now, a year after, a lot of wonderful things have happened. I am the admin of a Facebook community called Ompeluseura LevelUP koodarit, that has more than 2700 Finnish girls from different industries who code, or want to learn to code, and support each other on this journey! I have attended a 12-week boot camp to learn Javascript, React and Node. I have also attended JangoGirls, ClojureBridge, API Hackatemia, taken 75 new girls to Assembly to get to know the game industry and demoscene, organized AI excursions that have practically taught hundreds of women what on Earth is Artificial Intelligence by actual code examples.

People experts, AI-assistants, and Robots

I spent my summer doing different online courses like The Elements of AI (strongly recommended for anyone in working life), and Udacity courses on Python and Data science. And now I am working on a Data science Nanodegree.

Currently, I am also doing my dream job, working on my Ph.D. on the division of labor between people experts and their AI-assistants and robots. With professionals from different companies and different skills, we try to figure out how their current job descriptions might change because of AI, and what whole new careers and innovations could come out of applying these technologies in new ways and in new fields.

“We’ve come a long way”

I still have a long way to go, and I know that there are many things that I still don’t know, but I would like to quote a discussion from our Finnish girls’ programming camp from this July. While teaching the total beginners in making their first ever responsive sites, the founder of LevelUP coders Vlada Laukkonen and I had to admit: “We’ve come a long way”. 

P.S. Feel free to connect with me on LinkedIn, if you are interested in co-operating on my Ph.D. on the division of labor between Human experts, AI-assistants and robots, or organizing an event for the ladies in our Ompeluseura LevelUP koodarit -community.

What happened in the woods

 

This year’s Code in the Woods’ program is wrapped up, except for our Christmas Party. We’ve had couple of great events, the last one being Junior Camp that was held in the beginning of October. Junior Camp got 117 applications from where we picked the best 18 to go to the camp. With these happy campers, we had an amazing week together filled with coding and laughter. Now that it’s been couple of weeks since the camp ended, it’s nice to look back and go through some of the highlights of the week.

starting the week easy

The camp was kick-started in the previous week with a “Pre-Afterwork”, where the campers had the opportunity to get to know each other before heading to the woods together. It was a great event also for us organizers to meet the campers and see how the group functions together. During the evening, we discussed why we think having this mission and this concept, where we provide free learning opportunities, is important. We also had an initial overview of the work ahead in the camp, and of course, a social game to break the ice. The campers were clearly more comfortable about the next week as they left Barona Technologies’ office.

1.jpg

The actual camp began on Monday morning when we all met in front of Kiasma. The atmosphere was still a bit nervous as there were some new faces, that were not able to make it to the Pre-Afterwork, including two campers that flew all the way from Spain just to come to the camp. We got on to our bus and started our journey. Still, a bit tired group of people excitedly chattered in the back. Gladly, the drive wasn’t long and before we knew it, we already arrived at our destination.

The camp was held in the beautiful Villa Hummerheim in Porkkala, Kirkkonummi. The quirky lobster themed venue was quite perfect for spending four days in the woods coding. It provided some much-needed balance for sitting inside and staring at computer screens the whole day.

2.2.jpg
2.jpg

Monday’s mission after settling in was to divide the campers into teams, let them get to know each other better and to get everything set up for the rest of the week. This meant that we started with some team building exercises, and used the rest of the day for making sure that everybody had the tools they needed, and for brainstorming the teams’ app ideas. All in all, nice and easy start for the week, spiced up with just a little bit of frustration from waiting for everything to slowly get downloaded to everyone’s computers.

Time for some serious coding

Tuesday was the day when the campers really got into coding. Our mentor André had prepared a lot of exercises to familiarize everybody with React Native. They also got a chance to build their very first mini-apps using what they had learned so far. The coding lasted late in the evening, but gladly, most of the campers were able to detach themselves from their computers, and relax.

3.jpg

After a well rested night, started definitely the most intense day of the camp. After the day’s workshops it was time for the teams to seriously start building their final apps. This continued to quite late in the evening, and for some, also to the next morning. The beauty of React Native is, for one, the fact that you are able to quite quickly build functioning apps. The camp’s idea was that the teams would come up with relatively simple ideas for the apps, that would be possible to code in the time that they had, which most of the them were able to do.

Finally the Demo-day!

On Thursday morning, it was time to see what the campers had achieved and learned. Some teams were still eagerly coding some last minute changes or fixes right after they woke up, but soon after the breakfast, presenting the demos started. It was very cool to see how every team had very different ideas from each other, and most of the teams were also able to create rather nice looking user interfaces to their apps.

The Swans:
An app where you can look at different statistics of different nations. It has a long list of all countries that you can click and see the basic information of that country.

Team 42:
An app that allows you to find out random facts about your favorite number and also has a cool little history quiz.

3agle Natives:
An app that enables the user to browse different cryptocurrencies and to see how they fared. Includes also a search function to help the user to find what they were looking for.

Salty Simpletons:
An app where you could get your daily dose of dog pictures. It has long list of dog breeds that you can click and see a photo of. Also, it has a random dog photo option, if you don’t have any preference on the breed.

Dolphins:
An app that allows you to easily search, view, and favorite GitHub repositories on your phone.

NexIn:
An app that allows a group of people to listen music with some of them being the DJs and deciding what to listen. The other members of the group can vote if they want certain person to continue as a DJ or not. If someone is voted out, the next person “in line” gets to be a DJ.

huge thanks to everyone involved!

After the demos were presented, we started to head back to Helsinki city center. The campers seemed to be a bit tired, but quite happy. The goodbyes were short and sweet, as this will surely not be the last time we see each other.

IMG_8550.jpg

I am truly grateful that I had the chance to be a part of Code in the Woods and organize Junior Camp this fall! We had the best group of campers, that, at least me personally, could have hoped for. I especially enjoyed seeing the campers working together and helping each other, which is one of the biggest reasons for organizing Code in the Woods’ events, anyway.


Sini Pirinen

Code in the Woods coordinator

 

Essential tools and resources for React Native developers

fabian-grohs-423591-unsplash.jpg

When you get started using React Native, the upside is that there are many community tools and material on the internet. The downside is also that there are so many community tools and material on the internet, that you can easily get lost.

It can be hard to find tools to debug or profile how the app is working. Community UI components can come in varying degrees of quality. Some components work but are not up-to-date with the framework. Browsing through tools on the internet can take time and not end up fixing the issue at hand.

This short guide will highlight some essential tools that should be the first recourse for developers beginning to use React Native.

Basics

React Native docs and GitHub issues: the official documentation is the number one resource to start with, but also the GitHub repository is useful to read release notes (and there are quite often new releases). It is also useful to search through the issues and see if your issue has already been experienced by other people.

React docs: when building React Native apps, you'll be writing React components and it's useful to refer to its official documentation sometimes to learn to properly use lifecycle hooks, performance optimization, and when modeling your application through props and state.

DevDocs: you can combine both React and React Native documentations together at DevDocs.io, a handy webapp with aggregated documentation. It also includes documentation for JavaScript, Node.js, npm, TypeScript, Babel, Flow, Redux, Jest, which you might want to see in one place. You can also customize it to show only the tools that you'll be using.

Expo: although it's not an official RN tool, Expo is probably the quickest way to get started when building a React Native app, so it's ideal for the initial stages of a project or when collaborating with a designer. It's handy to keep the Android Expo app or iOS Expo app installed on your phone, as well as use Expo Snack (code an app in the browser!) for quick experimentations.

Community resources

React Native Navigation: the topic of navigation (managing the state and transitions between screens in your app) has been sometimes officially supported in the framework, but it has had better solutions in the community as well. Nowadays the framework still has some navigation-related components, but the wise choice is to use either React Navigation or React Native Navigation (RNN). If you can afford the time to propely setup RNN by following its documentation, it will turn out to be the best navigation solution you can find out there, with good API, platform look and feel, and responsive performance.

JS.coach: there are so many community components for React Native, that it becomes useful to have a curated list of components, with an easy way of detecting whether they support Android or iOS or both. JS.coach is such list, with a search field and sub-categories in React Native.

Awesome React Native: an alternative curated list is awesome-react-native which includes components, but also native modules, utilities, example open source projects, blog posts, conferences, etc. Search here before searching on the wild web.

Debugging and profiling

log-ios and log-android: in Web Development we are used to opening the browser's console to view debugging information. For React Native apps, you can also open the browser (shaking the device, then starting "Remote JS Debugging") to view the console. However, some logging information related to the native app is outside of JavaScript, and in those cases running react-native log-ios or react-native log-android can help. For Android, you can run just adb logcat and it will show logs on everything happening in the device, not only in your app. Read more about debugging tools in the docs.

React Devtools: you can inspect the hierarchy of UI components with React Devtools which works for both React (web) and React Native.

systrace: for profiling performance in Android applications, systrace is a tool (in the Android SDK) not so familiar to many developers, but essential. It has a rather inconvenient way of using, but once you gather profiling data, it shows a lot of important important that helps you improve the performance of your app. Read more about React Native profiling in the docs.

Learning material

Conference videos: React Native is a constantly evolving framework, and some of its internals are still not documented, so sometimes React Native conference videos (from e.g. React Native EU, ReactiveConf, Chain React) on YouTube can help gaining insight.

Egghead courses: sometimes you may want a video course where another developer guides you step-by-step in creating a real world app, so Egghead has a couple of these courses. Some of them are specific to topic, for instance, animations. You may find free videos also on YouTube, of various quality levels.

People to follow: some people in the community are influential and often send out news about the framework. Eric Vicenti is a React Native core team member at Facebook. Brent Vatne is the main developer for Expo, and overall is involved with React Native. Leland Richardson works at Airbnb with large React Native projects, and authors some libraries. Mike Grabowski is a member of React Native core team and runs a company specialized in React Native, as well as running React Native EU conferences. Emil Sjölander works on the native side (C) of React Native, Yoga. Martin Konicek previously worked on React Native internals, e.g. the bridge and often still shares some knowledge about React Native.

That should cover most of what you need to know when developing mobile apps with this framework!

6 reasons to learn React Native

React Native was created in 2015 by Facebook developers as a framework to build sophisticated mobile apps using JavaScript and React (a web framework). When it was released, it was seen as either revolutionary or naive, because so far JavaScript had been a poor choice for developing mobile apps. Today, some 3 years later, the framework and the community around have grown mature enough that it's easily a good choice for professional development of apps for Android and iOS. Let's see a couple of reasons why.

Modern way to build a mobile app

Typically, to create a mobile app, first you must make a decision between the two dominating platforms: Android or iOS. That choice will affect the tools to use, since these two platforms have entirely different software development kits (SDKs). The tooling sometimes takes minutes or hours to download and setup. After that, the first app template takes a minute to compile. Only then, will you see an app on the device and can start programming, that is, if you have learned the languages (Java for Android, ObjectiveC or Swift for iOS) and their development kits. Once you make a code change, the app needs to be recompiled. These SDKs follow an old style of application development.

With React Native, the development workflow is closer to web development. First of all, you don't need to make a choice between one platform or another. Whichever you choose, you'll download the same tools to begin with.

Then, when running one command in the terminal,create-react-native-app you will have an initial project to work on. Install it on the device, and after that you can reload the app in the same way you can reload a website, leading to shorter development cycles. This way, React Native has reinvented mobile development to be modern like web development.

JavaScript is the world's most commonly known programming language among developers, and it's the language used to develop apps in React Native. While ObjectiveC and Swift can be nice languages with interesting properties, they are outside of the comfort zone of many programmers.

Other frameworks on the same level as React Native, such as Xamarin and Flutter, utilize different and less popular languages, respectively: C# and Dart. Hence React Native is has unique qualities when it comes to popularity.

Not only is the language popular, but also the library for UI components, React, has been growing to become the most commonly known web framework. Both JavaScript and React are comfort zone technologies for a majority of programmers today.

Real native user interfaces

There are other JavaScript frameworks to build mobile apps, such as Apache Cordova and tools built on top of Cordova. These are also known as "hybrid mobile apps" frameworks, because they produce apps that are basically small websites ("WebViews") packaged as if they were actual apps. The result is not always a great user experience, even though the apps are convincing and can be used in practice.

React Native takes a different approach. The resulting apps have UI components built with the platform's official SDK, but orchestrated behind the scenes with JavaScript. This means there are no WebViews involved, and the user often cannot recognize the difference between a React Native app and one built with the platform's SDK, leading to better user experience.

Cross platform

Since JavaScript controls native Android and iOS UI components behind the scenes, it's possible for a JavaScript React component to be supported by both platforms. This gives developers some possibility to reuse code.

The framework focuses on "learn once, write everywhere", though, because not all UI components should be exactly the same for both platforms. For instance, Android and iOS have different design guidelines, which means often one Android UI component should not exist in iOS.

That said, many components can have the same look and feel on both platforms, and that's how React Native allows those to be coded just once. The convenience of using one codebase and one framework for building apps for two platforms saves development time.

Share code from browser or server

There are many frameworks that allow cross platform app development, but few that allow you to take snippets of browser code or server code and include that in the mobile app.

Since JavaScript runs in the browser and on servers (Node.js), there are thousands of libraries from npm that could be reused from one context to another. Some libraries don't make any assumption about the context they are running in, for instance, Date libraries such as Moment.js. Those could be easily utilized in the browser, in the server, and in React Native apps. This kind of universal usage of libraries is an exciting benefit of React Native.

Not a lock-in

React Native is open source (MIT license), but it's also important that it doesn't lock you into this choice in the long run. You can choose to develop only one screen of your app using React Native, while the other screens are built with the official SDKs. Or, you can develop all screens in React Native, or anything in between. It allows itself to be partially used in the project.

This creates a path for migrating away from React Native if you so wish in the future, or creates a path for you to migrate an existing app to React Native. That kind of flexibility is important for business and managers to allow developers to evolve the codebase while minimizing risk.


If you want to learn more about React Native, and how to actually start coding with it, be sure to participate in our Code in the Woods training to be held on 21st and 22nd of April. Welcome!

Viime vuoden Code in the Woodsin tunnelmia

English version

Code in the Woods oli yksi viime vuoden kohokohdistani. Oli mukavaa kerrankin päästä työskentelemään saman ryhmän kanssa useampi päivä putkeen, saman aiheen äärellä. Kiireetön ilmapiiri auttoi puhumaan ongelmista ja vapaa-ajan aktiviteetit vapauttivat kilpailuintoa.

Konkreettisimmat asiat joita opin, oli miten gitin feature brancheja käytetään tiimiprojektissa ja miten tärkeää luottavainen ilmapiiri on ryhmän tehokkaan työskentelyn kannalta. Sillä on suuri vaikutus, että osoittaa olevansa aidosti kiinnostunut siitä, mitä toinen tekee. Verkon välityksellä tämä ei oikein onnistu. Yliopistolla tulee usein tehtyä ryhmätöitä etänä tai siihen varataan liian vähän aikaa, jolloin vuorovaikutus jää melko ohueksi. Code in the Woodsin jälkeen olen panostanut lähityöskentelyyn enemmän.

Ennen leiriä pelkäsin, että minulla ei ole aikaa mennä sinne. Ajattelin kuitenkin, että tässä on loistava tilaisuus päästä juttelemaan alan asiantuntijoiden kanssa siitä, että millaisia taitoja työelämässä oikeasti tarvitaan. Rekrymessujen ständeillä tunnelma on aivan liian jännittynyt hiljaisen tiedon kaivamiseen. Pääsinkin nyt ensimmäistä kertaa alan töihin.

Code in the Woods auttoi minua ymmärtämään, että työntekijältä tarvitaan kolmea erilaista taitoa: sosiaalisia taitoja, halua ymmärtää asioita syvällisesti, sekä kykyä saada asioita aikaan.

Hyvillä sosiaalisilla taidoilla viittaan siihen, että on sellainen ihminen, jonka kanssa on mukava olla päivittäin. Ei tarvitse olla porukan puheliain ja menevin, mutta se, että ei ole jatkuvasti ärsyttävä tai inhottava on tärkeää.

Asioiden syvällinen ymmärrys mahdollistaa laadukkaan koodin tuottamisen. Pelkkä reippaasti eteenpäin roiskiminen ei riitä, jos on tarkoitus tehdä sellaista jälkeä, josta muut voivat myöhemmin jatkaa.

Toisaalta perfektionismi voi haitata työskentelyä. Hyvä työntekijä ymmärtää, mitkä ovat niitä yksityiskohtia, jotka kannattaa tehdä kunnolla.

Uskon että nämä kolme piirrettä pätevät kaikkeen muuhunkiin luovaan työskentelyyn, eivätkä pelkästään ohjelmointiin.

Oliko kokonaisen viikon mittaiselle leirille meneminen hyvä idea kaiken kiireen keskellä? Ainakin käteen jäi arvokkaita työskentelytaitoja, kourallinen kavereita ja varma olo muiden kanssa ohjelmoimisesta.

 

Felix Bade, 

Code in the Woods Junior Camp 2017

SECOND BADGE OF PWA DEVELOPERS

 

 

From the setting steams of Code in the Woods junior camp there raised excitement and demand for more. Senior developers with exciting and varied backgrounds reached for us and asked for a senior spinoff and we took the challenge. Barona Technologies and Forenom came together again to work side by side, successfully.

For two rainy Saturdays passionate professionals gathered together around the questions of Progressive Web Application. With the help of talented Petri Louhelainen, our teams built their own web based solutions and improvements on top of YLE APIs.

23715319_10213214444347971_1800213732_o.jpg

Since Google's release of PWA just two years ago, it has slowly but surely gained more interest in growing developer communities. Now in 2017 we can truly say it is one of the most interesting and functional discoveries in the world of application development. This was clearly seen at Code in the Woods as well. The level of enthusiasm towards learning and finally mastering the basics PWA was just admiring and we can truly say those Saturdays spent coding were definitely worth the hours.

Now after Code in the Woods junior camp and a two-day senior sprint we can proudly say there are now a few handful of new developers set in the right path of Application development.

Now after Code in the Woods junior camp and a two-day senior sprint we can proudly say there are now a few handful of new developers set in the right path of Application development. What’s the next top new technology to master? Stay in tune for 2018 and stay in the front wave of programming.

 

Rosa Smolander

Code in the Woods -coordinator

codeinthewood_sticker-01.png
 

RAJAPINNOISSA ON VOIMAA!

 

 

Suomessa sähkön jakelujännite on standardoitu 230 volttiin (standardi SFS-EN 50160). Samoin pistoke ja sen vastakappale on standardoitu (SFS 5805). LVI-puolellakin standardien lista on pitkä: yhtenä esimerkkinä hanat ja putket (SFS-EN 817). Kuluttajalle ja käyttäjälle on kätevää, että kaupasta ostetun riippuvalaisimen voi itse kytkeä paikoilleen ja käsisuihkun voi itse vaihtaa ongelmitta. Edellä mainitut esimerkit ovat fyysisten rajapintojen standardeja. Ne tuovat ihmisten arkeen monia hyötyjä. Yhteisistä standardeista on myös kansantaloudellisesti järkeä, koska ne pakottavat valmistajat kilpaileman tuotteiden paremmuudella, ei rakentamaan suljettuja ekosysteemejä ja monopoleja tai kartelleja. 

Olemme kehittäneet omaa Salaxy-sovellustamme nyt useamman vuoden ja lähtökohtana meillä oli alusta alkaen pitäytyä standardeissa ja toteuttaa sovellusta API-vetoisesti. Itsestään selvien internetin perusstandardien lisäksi (esim. HTTPS, JSON, REST), olemme toteuttaneet menestyksekkäästi mm. OAuth2 2.0 -standardin ja OpenAPI 2.0 –standardin. OAuth 2.0 antaa mahdollisuuden sekä omille tuotteillemme että muille rajapintaamme hyödyntäville käyttää valmiita kolmansien osapuolien komponentteja tai kirjastoja OAuth 2.0 -pohjaiseen autentikointiin. Käytännön sovelluskehitystyöhön tämä tuo nopeutta ja laatua. OpenAPI 2.0 puolestaan takaa sen, että pystymme toteuttamaan sovellusten käyttöliittymät käytännössä millä tahansa relevantilla kielellä tai frameworkilla julkaisemaamme API:a vasten. 

Standardit ja sovellusrajapinnat (API) ovat olennainen osa omaa sovelluksen suunnitteluprosessiamme. ”Onko tähän tarkoitukseen soveltuvaa standardia jo kehitetty?”, ”Onko kyseinen standardi jo tullut voimaan, ketkä muut sitä toteuttavat?” ja ”Miten tämä toiminnallisuus julkaistaan API:na?”. Nämä ovat meillä tyypillisiä kysymyksiä ja yhteisen pohdinnan käynnistäjiä. 

Standardeihin on pakattu valtava määrä aivotyötä jo valmiiksi ja sen takia niitä kannattaa tutkia, vaikka ei aina kaikkea itse toteuttaisikaan.

Standardeihin on pakattu valtava määrä aivotyötä jo valmiiksi ja sen takia niitä kannattaa tutkia, vaikka ei aina kaikkea itse toteuttaisikaan. Oman API:n rakentaminen on meille tärkeää luonnollisesti oman liiketoimintamme näkökulmasta, mutta myös siksi, että se auttaa meitä kehitystyön organisoinnissa. Käytännössä voimme jakaa työtä monelle taholle ja yhdistävänä tekijänä on dokumentoitu API. Näin esimerkiksi käyttöliittymätiimi voi tehdä työtään olematta jatkuvasti riippuvainen taustajärjestelmää kehittävästä tiimistä. Lisäksi työ voidaan vielä jakaa sekä käyttöliittymän että taustajärjestelmän puolella pienempiin osiin API:n toiminnallisten kokonaisuuksien avulla. 

Oma kokemukseni on, että rakensit sitten taloa tai palkanmaksuoperaattoria, niin toteutuksen lähtökohdaksi kannattaa ottaa olemassa olevat standardit ja API:t. Ne auttavat myös jakamaan laajankin kokonaisuuden ja työmäärän mielekkäisiin sekä helpommin hallittaviin osiin. 

salaxy_135_Olli.jpg

Pyörää ei kannata keksiä joka kerta uudestaan, vaan rakentaa uutta jo koeteltuja ja hyväksi tiedettyjä standardeja hyödyntäen. Hälytyskellojen pitää soida viimeistään siinä vaiheessa, kun kiinnität lampun johtoja kattoon jeesusteipillä ja sokeripalalla – tai huomaat tekeväsi käyttöliittymää suoraan taustajärjestelmää vasten! 

 

Olli Perttilä 

Co-Founder & CTO Salaxy.com