Like what you see here? Our mission-aligned Girl Geek X partners are hiring!
- Check out open jobs at our trusted partner companies.
- Watch all Elevate 2022 conference video replays!
- Does your company want to sponsor a Girl Geek Dinner? Talk to us!
Angie Chang: Next up, we have two architects from Fidelity Investments with the tech talk on simple technologies that can help deliver enterprise grade applications. So please join me in welcoming Divya Mahajan and Maria Lucena from Fidelity.
Maria Lucena: Thank you for having us.
Divya Mahajan: Thank you, Angie. We’re really excited to be here. I have to say, all of the talks today have been awesome. The last one was certainly a very fun and relatable conversation. So, thank you, Reeny and Susanna. Hello, everyone. And a happy International Women’s Day!
Divya Mahajan: I’m Divya Mahajan, working as a Director of Architecture at Fidelity Investments, responsible for setting architectural direction and strategy for some of Fidelity’s high net customer products in the alternative investment space among other things.
Divya Mahajan: Previously, I worked as a Director of Architecture in the cognitive computing space, building out Fidelity’s virtual assistant platform to create conversational experiences for our customers. A developer at heart, I love to see how my work makes a customer’s lives better.
Divya Mahajan: I graduated from WPI with a Masters in Information Systems. I live with my husband in Southern New Hampshire and when not building software, I’m an avid hiker and can be found on the mountain of New Hampshire to Africa, to South America. I also taught myself to play the guitar during the pandemic and love drumming away in my free time. Take it away. Maria,
Maria Lucena: Thank you, Divya. My name is Maria Lucena. Thank you for having me and happy International Women’s Day. I’m a Director of Architecture at Fidelity Investments. I’ve been doing software development for 13 years.
Maria Lucena: I have two beautiful boys. I have been blessed with an 18 year marriage, a beautiful puppy who just turned one this weekend and I enjoy traveling and trying new food. I am originally from Venezuela. I have a big family, nine sibling, so that means tons of nieces and nephews.
Maria Lucena: And, I’ve had a pretty an orthodox professional development because I chose to be a mom first and take care of my children before going to work. It wasn’t until 2007 that I actually got a Diploma in Web Development.
Maria Lucena: And then I went back to work and it was in 2018 when I completed my Associates in Information Technology. And then, this past year, I completed my Bachelor’s in Computer Science for which I received, [inaudible], in my Cum Laude Honors.
Maria Lucena: And that brings us to today, the capstone project for my bachelor’s degree. Now, when I was asked to solve for a community pro problem for that project, I knew exactly what I wanted to do.
Maria Lucena: Given my background as a working mother and because I have done my professional development in a gradual manner, I wanted to do something to help women improve their lives. I also have always had an interest for women in the workplace and the issues they faced and the fact that women earn 82 cents for every dollar a man earns.
Maria Lucena: So, my way of giving back was by building a portal to help women who needed to work and develop professionally, remotely. So, this is the main goal of Remote Brilliance – it is to help women help themselves find a better quality of life by finding online jobs and creating a community where they could learn and sharing their knowledge with others.
Maria Lucena: As I was getting ready to start developing the project, there were a few things I needed to keep in mind. I needed to follow the software development life cycle, which for designing, planning and executing the project. It also needed to be appealing, secure, and resilient.
Maria Lucena: When I went online, though, I found a ton of available tools and some of them at a cost, some of them for free and all of them promising to do what I needed. It was then, I realized I needed to draw from my experience at Fidelity to help me find the right tech stack.
Maria Lucena: Now, given my experience with GraphQL at the firm, and recently having used AppSync in a project. I chose to center my strategy around defining the entities and using a tool that would help me get a backend up and running. Defining the server structure can be complex and time consuming.
Maria Lucena: So, I knew if I solved this first, I could spend more time in the UI, which for me was more challenging. Let’s understand some fundamentals of GraphQL. At its simplest, GraphQL is a language for your API, because GraphQL has been designed with a focus on client applications. It makes the connection of the backend and the frontend more coherent.
Maria Lucena: Now, at the core of GraphQL, we have Schema, the Schema defines the capabilities of your APIs through the type system. And if we think of types as objects in object oriented programming, we can think of the properties of an object as the fields defined in the Schema and the behaviors as the resolvers implementing the business rules and the GraphQL server.
Maria Lucena: Now, going back to that point of understanding the type system, I had to observe my business model and define its entity so that I could start building my API. I was recently involved in a project using GraphQL with apps, AWS AppSync, in which I learned that AppSync and the AppSync console, there is a co-generator tool, which is scaffolds all the operations for an entity to a Schema.
Maria Lucena: So, I could get my backend scaffold pretty quickly if I use that tool. Once I saw for what I wanted to deploy, for how I wanted to deploy the backend, I moved my attention to the client and how to wrap the traffic. A few years back, Divya and I worked on a, [inaudible], site for a nonprofit organization through Fidelity, change is simple.
Maria Lucena: What I learned about the pattern of using S3 for host static sites, at Fidelity, we use AWS and I know and trusted well enough to use its services on any project so you can see the entire application is hosted and run by AWS services.
Maria Lucena: Fronting the app, we have Cloud Front, which is a CDN and then there is some S3 in the middle and with AppSync at the back. So, here you have a high level look of what the end to end architecture is. I will dive a little bit into what the frontend is made off and then Divya will cover the backend.
Maria Lucena: As I mentioned earlier, there are many tools available for creating web and mobile applications. There is much promise of one size fits all for applying styles, but the reality is flexible designs are difficult to achieve.
Maria Lucena: So, using the right libraries can help you get closer to what you need.
Maria Lucena: I was part of a larger platform CCP with Divya, a Cognitive Computer Platform, where the client solutions team was using, [inaudible], a team made off of UI experts for building the platform’s portal. So, this led me to settle on using that framework for my UI.
Maria Lucena: Now, Vuetify compliments Vue. With a UI Library that uses material components, these are not only beautiful or design components, but also meet accessibility guidelines and other UX concerns. So, you get some professionalism within that library. Now, Cognito provides to [inaudible] layer for users and also for the APIs.
Maria Lucena: As I was implementing this, it became really time consuming to create all of the resources needed manually and that is when I came across AWS Amplify. And this is a set out of tools and features created by AWS to help developers build full stack applications. It’s a CLI and an SDK, so you can use it to build things and then at run time. With this in place, I was ready to connect to the backend. I needed a library to talk to GraphQL and Apollo was the obvious choice.
Maria Lucena: It doesn’t need an orchestration to talk to the GraphQL server and have some added configurable feature for caching out of the box. Finally, I needed to route the traffic to a secure endpoint. And I found a tutorial using Cloud Front, Route 53 with S3, which was created by a Daniel Galati, the author of, Be a Better Dev series. Let’s take a look at that one time.
Maria Lucena: So, this is what it looked like. It looks like when that request comes in, when the user, Remote Brilliance, that link Route 53, a DNS service, checks it, that there is a valid certificate and then routes the traffic to Cloud Front, a CDN, which then points to the public bucket. And that eventually routes to the private S3 bucket, where the static assets of the application are hosted.
Maria Lucena: With that, we’re going to look at a quick demo and I’m going to start from the authorization component, which is done by Amplify. And one thing I want to show here is that none of this is really done by me. All I had to do was copy a template and drop it in my application and all of the actions that are needed resetting a password, creating a, [inaudible], account.
Maria Lucena: All of those things are managed by AWS Amplify SDK. So, there is very little that you have to do if you use that SDK. And now, I’m going to move on to showing this, if is done with, as I said, Vuetify JS. If you go to their documentation and choose any UI component you want to use, you can quickly add your styles and your customized, the colors.
Maria Lucena: And one neat thing that I really enjoy about this, it’s that if you set a palette, a color palette for dark and light modes on that plugin, you can just expose a flag to your UI and you can quickly get through your application, this dark and light, which is, I think I find it pretty amusing.
Maria Lucena: Now I’m going to point to the network console here. And we want to show at this point how with a single endpoint calling GraphQL, you can get all of your operations. So, this is the job, [inaudible], listing a single job. I’m going to do and add here, and then I’m just going to save it. And I want to demonstrate how… This is done by Apollo, the Apollo client.
Maria Lucena: And if you pay close attention here to the headers, you’ll notice is the same end point. But as I look, as I show through the payload, you’ll see the operation changes. So that’s get a list, get a job and list the jobs and so on. So that’s really, that’s one of the benefits of GraphQL. And with that, I’m going to pass it off to Divya. Thank you.
Divya Mahajan: Thanks Maria. So, we just saw how the web client so seamlessly communicated with the backing system GraphQL in this case, over a single end point to interact with various different entities and resources to display all of the data, to render that beautiful website.
Divya Mahajan: The backend in this app is predominantly made up of GraphQL APIs, implemented using a managed AWS solution called AppSync. But before we talk a bit more about these technologies, I just quickly wanted to point out that given that we have less than 10 minutes together at this point, this is definitely not an in-depth GraphQL class.
Divya Mahajan: We will probably need a couple days if not more to do that. But Maria and I have extensively implemented GraphQL APIs using various different platforms, such as AWS AppSync, Apollo, among others at Fidelity, in building enterprise grade applications. So, today is more of an opportunity for us to give you enough information to get you excited in building solutions of your own using these technologies.
Divya Mahajan: All right. So, what exactly is GraphQL? Well, it’s basically a syntax that allows you to define what data you exactly need. No more, no less. It’s a query language like Maria pointed out in a run time for executing those queries to retrieve existing data.
Divya Mahajan: A GraphQL service is created by defining types and fields on those types, not end points. And I want to make this point abundantly clear as that’s one of the major differences between using a REST specification versus using a GraphQL specification.
Divya Mahajan: Also, GraphQL also uses types to ensure apps only ask for what’s possible from a particular GraphQL runtime, and provides clear and helpful errors in the event that the apps ask for more than what’s in scope for a particular GraphQL instance. Now HDDB, as we all know, is the most common choice for client server protocol because of its tube equity.
Divya Mahajan: And that’s exactly what GraphQL APIs also use to communicate between a client and a server. GraphQL strongly type system uses SDL short for Schema Definition Language to define an API Schema, basically its types and its fields. SDL is a shorthand notation for succinctly expressing the shape of a data graph that a client expects to see. Next slide, please Maria. Thank you.
Divya Mahajan: Here’s a quick example of what a sample Schema looks like now. Maria also mentioned how Schema is at the core of GraphQL. Here, we can see a sample query as well, based on SDL and a sample response to execution of that, [inaudible], mentioned query.
Divya Mahajan: As you can see the job entity here supports many fields, but the client query in this example only, [inaudible], to resolve specific fields like category, company description, company name, et cetera, which is only made possible by GraphQL and would not have been possible by using REST.
Divya Mahajan: All right, now that we understand a little bit about GraphQL, let’s talk about why we should consider using GraphQL and what its advantages are over REST, which currently happens to be one of the most commonly used API specifications. Next slide, please. Thank you.
Divya Mahajan: Now I love this quote from Edsger Dijkstra and personally for me, GraphQL sort of embodies the notion of brevity without jargon, quite wonderfully. It’s a clear language, that’s simple and a fruitless.
Divya Mahajan: A client can just ask for what they need without having to provide too much unnecessary syntax, [inaudible]. So, GraphQL sort of really sums it up. As far as this quote is concerned, some of the other advantages of using GraphQL and if you go to the next slide, Maria, thank you.
Divya Mahajan: So, why typical REST APIs require, [inaudible ], from multiple APIs and multiple different URLs? GraphQL APIs get all of the data and app needs from a single endpoint. This obviously helps avoid making multiple API calls for a particular operation. Also, there’s no over fetching or under fetching of data.
Divya Mahajan: Now, one of the major issues with REST is that, it can contain too much data or sometimes not enough data at all. Which creates the need for additional requests, while GraphQL solves this problem by fetching only the exact and specified data in a single endpoint and a single request from all of the resources that need to be queried by a particular client. Lastly, it can evolve without versioning.
Divya Mahajan: Now, why do most APS version anyway? One might ask. Well, when there’s limited control over the data, that’s returned from an API endpoint, any change can be considered a breaking change and breaking changes require new versions.
Divya Mahajan: In contrast, GraphQL only returns to the data that’s explicitly requested. So, new capabilities can be added via types, via fields and operations without creating a breaking change by using single evolving versions or version, GraphQL APIs, give apps continuous access to new features and encourage a more cleaner and a more maintainable backend code.
Divya Mahajan: Now hold on, Maria and I are talking about replacing all of the, or proposing replacing all of the systems that REST today with using GraphQL. And like we all know, nothing in software is one size fits all, and there will always be used cases where REST is more preferable over GraphQL. But what we’re pointing out is that these are just some of the reasons we chose GraphQL over REST in building scalable apps in no time at Fidelity.
Divya Mahajan: And so, are merely pointing out that if you are looking for an alternative to some of the pitfalls of REST, then look no further. Next slide please. But how does it all work?
Divya Mahajan: GraphQL has three major components. I think we’ve already touched upon them first being the Schema, which is basically a definition of all operations, including the types, fields and the functions that are defined on those types. Data sources, this is where the data comes from and the data goes in various different operations that can be done on the data. And lastly, resolvers, which act as connecting blocks between the Schema operations and the data sources, basically the business logic that executes the requested operation in a particular client query.
Divya Mahajan: Now an app designed to use GraphQL in the realm of a serverless technology makes it a very powerful combination. Why? You ask. It’s because in building cloud native applications, the infrastructure is already managed by a cloud service provider and the app teams only need to worry about business logic. And this is where AWS’s AppSync shines.
Divya Mahajan: To get an API app and running in no time, AppSync provides automatic code generation like Maria alluded to, aided by its Schema first design approach. The end result is, and automatically generated API with all the client side operations already present and ready for us to use. This truly, as you can imagine, is a, [inaudible] for developers that want faster code development and a more structured approach to building data driven applications. Now in the interest of time, next slide please, Maria.
Divya Mahajan: I quickly want to about just a couple ways in which any AWS resources can be deployed to create and deploy scalable cloud apps, Infrastructure as a Code, as you can imagine is an absolute must.
Divya Mahajan: And the two ways that we want to talk about today is the ubiquitous Cloudformation template introduced back in 2011 is probably the most universally used technique to deploy an infrastructure stack within AWS.
Divya Mahajan: The second, a more newer kit on the block called CDK or Cloud Development Kit has been catching steam. And I think we’re on time, but, you get the idea.
Divya Mahajan: Now, Maria and I understand that this is a lot of information in a very short amount of time, but we really hope you enjoy the conversation, took away some excitement and shared some excitement like we have, in creating cognitive applications using GraphQL, [inaudible], AppSync.
Sukrutha Bhadouria: Thank you so much, [crosstalk]. Thank you so much both Divya and Maria for all the insights and information, as well as the slide linked with all the resources. Quick note to everybody, all of this is going to be recorded and accessibility to you all later. Look out for your emails. So, don’t fret if you missed a few details or you want to catch up on it, even the slides you’ll have access to. All right over to our next bit, which is our coffee break.
Like what you see here? Our mission-aligned Girl Geek X partners are hiring!
- Check out open jobs at our trusted partner companies.
- Watch all Elevate 2022 conference video replays!
- Does your company want to sponsor a Girl Geek Dinner? Talk to us!
