Now that the Outreachy internship is about to end, it’s time, to sum up, the final project progress and my erudite and productive internship journey with OCaml Organisation. Before moving further, I remind you, Outreachy is a diversity initiative that provides paid, remote internships to the people who identify as underrepresented groups in the tech industry. I was selected as an Outreachy intern to work with the OCaml organization on the project ‘Improve OCaml.org website’.
OCaml is a general-purpose programming language with rich toolsets and libraries and its community comprise mainly of functional programmers.
My project with the organization is working on the launch of the V3(version) of the main OCaml.org website to support some new features coming to OCaml such as Multicore Support.
Tech Stacks Required for the Project:
The V3 site of OCaml is built on OCaml (for processing data) and various other modern technologies like ReScript (for frontend work), NextJs (for server-side rendering and generating static website), and Tailwind (CSS framework to build modern websites in an easy and customized way).
My Project Tasks:
My main project goals were to:
- Implement Web designs for webpages using ReScript and Tailwind.
- Import data from the old repo of OCaml.org to ocaml/ood repo to use in the V3 site.
- Improve accessibility of the Website.
- Provide data/content wherever required.
- Writing an Outreachy Blog every fortnight during the internship about my internship progress.
A Quick Glance at ReScript:
ReScript is a new and strongly typed programming language that combines the best parts of JS and OCaml making development much faster and smoother.
So let me tell you why the type system is very important and how ReScript is addressing this issue?
Type System in OCaml and ReScript:
Static typing includes declaring types of variables, function returns, etc. It can be possible that a variable that is declared gets assigned with a different type. When using a Type system, the compiler will throw an error if something is called with “incorrect type”.This allows the developer to see the type error easily by just running terminal commands and hence the possibility of breaking of code during runtime gets avoided. Thus ReScript having OCaml’s type system feature helps in the maintenance of an extensive codebase where a large scale of type errors are possible, thus reducing the effort and cost of production.
Here is how the ReScript compiler throws an error:
The ReScript has inbuilt Reactjs bindings that enable developers to use react features. It has two file extensions .res for implementation and .resi for interface.On compiling, .js files are produced with js output for ReScript codes.
Bindings in ReScript- pros, and cons:
Bindings in ReScript is a way to use JS functions/libraries and third-party APIs in ReScript. For example, if a project needs react leaflet library, first dependencies for leaflet are installed and then one binding file with .res extension is created specifying the types of the Leaflet’s function and containers. So that the containers of the third party can be accessed in the project. Below is the binding for MapContainer:
- Pros: easy to use existing JS libraries.
- Cons: Sometimes it takes more effort and time to do ReScript bindings for complex APIs.
Variant type and pattern matching:
The best feature of ReScript that I came across was its variant types and pattern matching feature. It helps to deal with logic errors that occur in JS because of NULL or UNDEFINED values but ReScript doesn’t allow NULL values and Variant type in ReScript helps in achieving this very goal. Have a look at how null value is beautifully taken care of using Option type and Variant. Notice the option, Some, None keyword.
Cons: when dealing with pattern matching one has to make ensure to take care of all cases otherwise compiler throws errors.
Each ReScript file is a module in itself with the same name and is accessible to every other ReScript module. So, Unlike Reactjs there is no need of importing and exporting of modules and functions.
For example a variable name myVariable in Test. res can be accessed like this Test.myVariable in other files.
Community & Documentation:
The ReScript is a new language with a growing community and with mediocre documentation. A newcomer like me had to struggle a lot as there are very few solutions and approaches available on the internet for ReScript bugs.
For the first time as a ReScript user, I had to wait for more than 1 min every time to compile code, giving me an irritating feeling.
Use of React-Leaflet library and Next js Dynamic Importing :
I worked on the implementation of the world Map on the ‘Academic page’ using React-leaflet Map. As discussed earlier, in ReScript, for using JS libraries or third-party APIs in the project there is a need to create ReScript binding for that API/Library. For the leaflet library, one ReScript binding file was created. Since my project also uses Next.Js, there was an error in rendering Map(leaflet containers ) in the browser.
Next.js uses SSR- Server Side Rendering while React-leaflet uses CSR-Client Side Rendering. Hence one conflict arose as the leaflet failed to find Windows objects in SSR. This problem was solved by the functionality of Dynamic import in NextJs.
NextJs provides an advanced feature Dynamic Import by which JS modules can be dynamically imported in the browser when the web page loads. With the help of this functionality, the Leaflet map was successfully loaded in the browser. Below is the code snippet of ReScript Binding for the next/dynamic functionality.
My experience with OCaml syntaxes:
My very first task during the internship was to work on the OCaml/ood repo to import all required data for the academic webpage from the old repo. I got the opportunity to work with OCaml, Yaml, and markdown files. Here is a code snippet of my work:
Some of My major PRs/work in ReScript:
Implemented the web design for Academic Excellence Webpage using ReScript and Tailwind and using some react hooks. Made my second major PR.
Implemented the design of the Industrial Users page with improved readability of code. Made my third major PR.
My open-source experiences takeaways:
The best part of Open Source is anyone can contribute. You are not required to be a pro in the field. The open-source community especially the OCaml community where I worked were very helpful and friendly. I could ask doubts to any of the OCaml members and they were always ready to help me. Open source helped me enhance my tech skills and provided me with a wonderful experience working on a real-world project. I interacted with people from different countries, communities and also got to work with the web design team. These all experiences have helped me enhance my personality development and coordination and teamwork skills.
Once I asked my mentor- what’s the inspiration behind working in the open-source? And he replied that it gives him satisfaction when people use his contributions for free. By doing this, he is helping others and creating a positive impact on technology and as a result in people’s lives directly. And yes this is what Open Source actually is!
Tips for Upcoming Interns:
Open Source is the best platform to showcase your technical skills, where you can help people directly with the contributions, and Outreachy provides a better platform to grow and learn. You need not be pro in any technical skills all that matters is the quest for learning and improvement.
Never afraid to ask questions and seek help from the community members. Before asking any question to mentor first research on the topic, if not able to solve in 4-5 hours then ask.
My Takeaway from this internship:
I was fortunate to do my first internship in Outreachy with the very supportive and friendly members of the OCaml Organisation. I got an opportunity to work with the web design team along with the backend and frontend teams. I have learned many technical skills and gained confidence in web development and enhanced my network. I admire my mentors a lot for their leadership skills and helping nature. I never felt any pressure while working on the project under their guidance. They are the most lovable people I’ve ever met. I will miss Outreachy and its community. 🥺