Welcome to my talk, crafting, front and strategy. My name is Maria Ka and I'd like to briefly introduce myself as Anna said, I'm a front end technology lead at, at Ari Solutions, a company based in Cologne Germany. In my free time, I like to write articles for Incon.So feel free to check it out. And if you have any questions or you like to connect, feel free to drop a line via email, linkedin or Twitter. But let us start with the talk. What's the struggle? Last year? I was appointed as Front End technology lead and I was given the task to prepare management summary on front end strategy. So what did I do? I went Googling, I discovered that there are just few links with tips. So I was left without any real help for this. So then I decided to check out the um tendencies um on current trends and how I'm supposed to choose the state of the art technologies or future technologies for Front end. Um It was December 2020 there were a lot of um websites uh with some recommendations, one site for example, said there's gonna be progressive web app and single page applications and uh motion design and typescript. Another website said it is gonna be typescript, um motion design, progressive web apps and single page applications. So consistency is good.

But I strongly sense the copy paste skills and that made me even more insecure how I'm supposed to choose if, if, is it the truth, what it's written in those um articles is it should I follow those recommendations? So this is when the idea of this talk was born, I decided to share my insights on the way to the front end strategy that I had to prepare for my company um to share um with you. Anything that I've learned uh through this process, let us start. I'm gonna cover the connection between strategic framework of your company and the front end strategy. Um How, so some approaches and techniques, how you can uh make sure that you choose the right technologies and the difference between front and technology for your uh company, like internal front and strategy and the strategy in in the case, if you are a consulting company. So you have to accommodate some other uh requirements in the strategy too. Let us start. Um Let's have a look at um at the overall company. Usually unless you start uh registering your start up, you wouldn't start from scratch. So in your company, there, there is a vision or it should be, there should be a vision mission and strategy. For the whole company, which means that you have to fit in.

Um For example, if your hr has the uh pyramid as the um overall um uh structure, meaning uh more associates um colleagues at the bottom and few uh just a few senior um colleagues, then you have to um align your needs uh within this she too or you have to negotiate with your um colleagues.

Um If you need more senior people than and less associates. Uh But the positive side of this is that you don't start, start from scratch. So you there might be some documentation on the strategy so that you can align your front front end strategy within it. Um For example, you can use business canvas. Oh There, you can find the information about USB unique selling proposition and the target um customers, I will cover this later once we are talking about um consulting other companies. But um this is certainly the information that you can uh reuse in your front end strategy. Um I went on with saying that we are the um a highly professional team, highly motivated client oriented. However, my sparing partner said that I can approve this. Um So I'd better go with some fact based information. For example, um I'd say you should go, maybe you should go with industry knowledge and then you can provide reference pro projects for this or maybe you cover uh you can provide end to end support for your products because um the skill set in your company allows you to do so you can prove it.

Um Maybe your, your offer is unique due to you your cooperations. So you can prove it by providing the con contracts with your partners. Maybe if you still want to go with the highly skilled team, you can provide some certifications uh to stay at the point. Um Another piece of information that you can reuse uh could be the SWAT analysis. Um strengths, weaknesses, opportunities and threads. I'm not gonna go into details about this type of analysis. There are plenty information on this. Um But um rather some topics that I covered in my swot analysis to prepare for the front end strategy that you might use uh for your company. First of all, the differentiation between front end and back end. So it's really hard to say where front end stops and backend begins. And if there is a back end technology lead, how do you differentiate, how do you divide your responsibilities or if your company has full stack developers? How do you um Well, how do you split your this person into two between front and back end? Speaking about um competitions, you might mind freelancers because this is um a huge part of um highly skilled professionals that are out there in the market that um uh quite often take over the front end developer tasks.

Um If you're a middle sized um a company like we are, uh you probably um should look at price driven agencies or offshore colleagues because or offshore companies because um they are more flexible in price and um time. So um you have to come up with some um focus on your projects to um to make the best out of it. Um Speaking about the chances uh front and is becoming more complex. So your customers are relying more and more uh on external expertise, which is a chance for you for your company or might be the chance on the other side. Um There is a rise of low code platforms. So um some companies might, some customers might decide to um code or to, to create their websites themselves, which is um definitely a threat. Um Another thread is that um there is actually no established certification for Front End. Like we have some cer certificates for architects.

We have several certificates for back end like Java or Aws or whatever technology. But for Front end, there is nothing, at least not that I know uh which is really widely spread and maybe except for Google developer expertise, uh experts. But that's, that's another story. And the last but not least, um the mo the focus of software development moves away from web development. This is an unpleasant news. But now, um IOT Blockchain or machine learning are rather the hot topics and web development as well as mobile development are rather seen as um enablers, which is still important. But it's re it's an, an ar this is a different arguing position within the company if you have to uh nego negotiate for budget. So what were the challenges that I faced during um preparing when preparing my front end strategy? First of all, as I mentioned, um front end is becoming more and more powerful. So it's really hard to say um where is, what is the scope of, of my role? What's the scope of this strategy? Um And it's really hard to, to, to, to, to um differentiated from different from other technologies. For example, all the static site generators um part of front end are hybrid mobile apps, part of front end since they are run in the browser.

So what is the scope of, of my role? What is the scope of the strategy and then this infamous framework type every single week, there is a new frame, front end framework. So you have to, what is top, what is flop, how do you um stay up to date and how do you figure out what's the real thing? What's the next big thing? Those are again the two questions that you have to answer in your front end technology strategy. Um As I mentioned, the front and front end development or web development is no longer in focus. So it's harder for you to um to negotiate, to ask for more people for more budget if um the focus moves towards cloud towards iot or other stuff um connected to this. This is um uh the the the role or the reputation of front end development in German. There's a word called um pixel chuba, meaning someone who is moving around pixels, which is kind of irrespectable towards front end or ironic towards front end developers. So you, you have to do some marketing uh within your company too, to prove that front end developers are as skilled as back end and they are doing as complex work job as um other developers do. Sometimes it might be the case.

Um It's not only about the technology, so you have to think about developer experience, you have to train your people and this is actually the most valuable aspect. It's it's the thing that um make uh can, can disrupt all the the whole brilliant idea of the best technologies that you've chosen. And um another layer layer of complexity is that you have to think about uh technologies not only for yourself or your company but also for your clients if you're doing some consultancy work. So, but the overall idea of it is that you first have to concentrate on the why question or the reasons um the assessment criteria for the technologies. And once you have this, once you know what's important for your company, then you can choose technologies and then you can overcome this frame frame or type, you know why you've chosen um those technologies you, you've made a conscious choice uh in this case. So speaking about this, why question, let us have a look at one of the approaches I've discovered this case study. I've provided a link below um where the author um did exactly this.

Um First of all, he um talked to um his people, like no front end strategy will come outside. You have to base it on your uh your company's needs. Talk to your developers, talk to your architects, ask them about their pain points about um the problems with the code base. The process of code review, all this stuff, talk to your Scrum master, talk to your product owners about features, feature validation, feature release, big dreams if technology was no limit. Um And once you have this information, you should um refine this pool of thoughts um structure.

Those are the three elements in here with the main goal to come with some clusters of um requirements. In this case, uh which is quite similar to ours. The author came with came out with three clusters. The first one is the um custom experience and developer experience. Technology is product enabler and cultural fit. So um we want to have a technology that minimizes time to market. We want to maximize productivity. We wanna automate our processes and we want to maintain clean code base. Um We wanna have a technology that, that supports product growth now and in the future. And of course, there should be a cultural fit uh for our co in our company. Once you have this requirements framework or assessment criteria, you can move on and assess technologies and choose which one you're gonna keep for this. There's another technique I could recommend um called Technology Radar. If you're not familiar with this, uh go on and read the article that I provided below, I'm not gonna go in too much detail on this, but um this is a technique that allows you to document, assess and structure your technology stack. Um You can decide which technologies you wanna avoid, which uh you're gonna experiment with or maybe some that you wanna focus on and learn more about them and the ones that you are already using.

So you can go even further in structuring and clustering your front end technologies into some groups. This is an example that I use in my company, for example and the um powerful apps, fancy sites, allrounders, helpers and essentials. And I mean by this, the following, of course, you need to cover the essentials providing responsive accessible, cross browser and device compatible apps. But then you can differentiate even further by saying if you're gonna build bigger apps or more complex apps, apps, you might gonna wanna go with angular because this framework is more suitable for this. If your focus is on beautiful micro sites, you'd rather concentrate on success frameworks and animations. So it allows you to be more precise about your choices. And this is also important in case uh your company provides some consulting services and this is the next part of my presentation.

So in case you um are you are consulting your clients, your front and strategy becomes your product strategy? Because your front and skills is a product that you sell to your customers. Um And it's no longer about enabling your own company but also enabling your customers. This um leads to the change in your why in the assessment criteria that you have? Because you have to have a look at the text of your clients and at the needs of your clients. Um And since the why the underlying reasoning changes, it also changes your tech stack, your technology ra r your choices and inevitably um you, you have to face a trade off between your cash cows and state of the art of future technologies. For example, if your clients use jquery and you think you should sun sunset it, you have to be involved in some transition um of this technology and your clients towards the future technologies or state of the art technologies, which might be another source of um projects, but may maybe also a pain point for you.

Um Whereas as internal strategy, you should align your tech stack within projects here, you should probably better diversify to be more stable in the market. This is also the difference between the internal strategy for your company or the the strategy if you consult someone and um there is there will be a shift in soft skill requirements because you no longer need only brilliant developers but also brilliant communicators. So you have to pay closer attention to trainings to soft skill developers development, um communication of your colleagues of your team to sum this all up. Um your front end strategy has to fit in into the whole strategic framework of your company. You can reuse some existing documentation uh to align it better. You have to come up first with the, with the outer circle with this reasoning how and why you're choosing technologies, what's important for your company, either through internal uh brainstorming or through the market research from your clients, um their client, their ST tech and needs.

And once you've done with this, you're able to choose technologies, we can structure them and document them your choices through the technology radar. Uh Don't forget the people at the heart of your technology radar. And once you're done with this, don't forget to reiterate to reiterate once in the uh quarterly for the Technology Radar, for example, once in a year for for the outer circle and if needed also the whole strategic framework, that's it for today. And by the way, there's a fun fact, this uh tips um can be also used for your personal uh front end strategy. But this is a topic for another talk. Thank you for your attention and have a nice day.