Category: Front End

Automating your workflow

During development, there are many occasions where we have to do things that are not directly related to the feature we are working on, or things that are repetitive and recurring.
In the time span of a feature development this can often take as much time to do as the actual development.

For instance, updating your local dev micro services environment before testing your code. This task on its own, which usually includes updating your local repo version, building and starting several services and many times debugging and fixing issues caused by others, can take hours, many times just to test a simple procedure.

We are developers, we spend every day automating and improving other people’s workflows, yet we often spend so many hours doing the same time consuming tasks over and over again.
So why not build the tools we need to automate our own workflows?

In our team we decided to build a few tools to help out with some extra irritating tasks we were constantly complaining about to each other.

First one was simple, creating a slush sub-generator. For those of you who don’t know, slush is a scaffolding tool, like yeoman but for gulp. We used this to create our Angular components.
Each time we needed to make a new component we had to create a new folder, with three files:


  Comp.component.ts
  Comp.jade
  Comp.less

Each file of course has its own internal structure of predisposed code, and each component had to be registered in the app module and the main less file.

This was obviously extremely annoying to redo each time, so we automated it. Now each time you run “ob-genie” from the terminal, you are asked the name of your component and what module to register it with, and the rest happens on its own. We did this for services and directives too.

Other than saving a lot of time and frustration, this had an interesting side effect – people on the team were creating more components than before! This was good because it resulted in better separation of code and better readability. Seems that many tim the developers were simply too lazy to create a new component and just chucked it all in together. Btw, Angular-CLI have added a similar capability, guess great minds think alike.

Another case we took on in our team was to rid ourselves of the painstaking task of setting up the local environment. This I must say was a real pain point. Updating the repo, building and running the services we needed each time could take hours, assuming everything went well.
There have been times where I spent days on this just to test the simplest of procedures.
Often I admit, I simply pushed my code to a test environment and debugged it there.
So we decided to build a proxy server to channel all local requests to the test environment.

For this we used node-proxy, a very easy to configure proxy. However, this was still not an easy task since each company has very specific configurations issues we had to work with.
One thing that was missing was proper routing capabilities. Since you want some requests to go local and some remote we added this before each request.

https.createServer(credentials, function (req, res) {
 Object.keys(options.routingTable).some(function (key) {
   const regX = new RegExp(key);
   if (regX.test(req.url)) {
     printMe(req.url + ' => ' + (options.routingTable[key].targetName || options.routingTable.target));
     proxy.web(req, res, options.routingTable[key]);
     curTarget = options.routingTable[key];
     return true;
   }
 });
}).listen(options.home_port);

We passed as an option the routing table with a regex for each path, making it easy to configure which requests to proxy out, and which in.

routingTable = {
  'site': local,
  '^/static': local,
  '/*/': remote
};

Another hurdle was working with HTTPS, since our remote environments work on HTTPS.
In order to adhere to this we needed to create SSL certificate for our proxy and the requestCert parameter in our proxy server to false, so that the it doesn’t get validated.

The end configuration should look something like this.

const local = {
   targetName: 'local',
   target: 'https://localhost:4141,
   changeOrigin: true, 
   secure: false
 },
 remote = {
   targetName: 'remote',
   requestCert: false,
   rejectUnauthorized: false,
   target: 'https://test.outbrain.com:8181,
   secure: false,
   changeOrigin: true,
   autoRewrite: true

 },
 routingTable = {
   'site': local,
   '^/static': local,
   '/*/': remote
 };

const options = {
 routingTable: routingTable,
 home_port: 2109,
 debug: true,
 startPath: 'amplify/site/'
 };

With this you should be able to run locally and route all needed calls to the test environment when working on localhost:2109.

So to conclude, be lazy, make your work easier, and use the skills you have to automate your workflows as much as possible.

חדשות מעולם הפרונט אנד – ניוזלטר #6

השבוע בפורום הועלה דיון מעניין על גיוס מפתחי פרונט אנד וכמה תואר וידע בהנדסת תוכנה רלוונטיים למקצוע. אמנם לא הגענו למסקנה חד משמעית, אבל כולנו הסכמנו שמפתח פרונט אנד היום הוא הרבה יותר Fullstack מפעם, ושידע באלגוריטמים והבנה של איך דברים עובדים הם יתרון מאוד גדול. מה דעתכם? מוזמנים לכתוב בתגובות.

רוצים לקבל חדשות מעולם הפרונט אנד לפני כולם? הרשמו לניוזלטר שלנו!


הלינקים הנבחרים מהפורום

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

קצת על הניוזלטר והפורום

אחת לשבועיים מתקיים פורום בקרב מפתחי הפרונט אנד באאוטבריין. הפורום מתחלק לשני חלקים, הראשון: סבב שיתוף ידע בין אנשי הפורום, השני: הרצאה או דיון מעמיק על נושא מסוים בעולם הפרונט אנד. בניוזלטר הדו-שבועי שלנו תוכלו לקבל תקציר לכל הדברים עליהם דיברנו בפורום.

חדשות מעולם הפרונט אנד – ניוזלטר #5

השבוע בניוזלטר – לוגו האולימפיאדה בCSS3, האק בCanvas שיאפשר לכם לפרוץ את גבולות חלון הדפדפן, פודקסט שמוקדש למפתחי פרונט אנד, ועוד…


הלינקים הנבחרים מהפורום

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

קצת על הניוזלטר והפורום

אחת לשבועיים מתקיים פורום בקרב מפתחי הפרונט אנד באאוטבריין. הפורום מתחלק לשני חלקים, הראשון: סבב שיתוף ידע בין אנשי הפורום, השני: הרצאה או דיון מעמיק על נושא מסוים בעולם הפרונט אנד. בניוזלטר הדו-שבועי שלנו תוכלו לקבל תקציר לכל הדברים עליהם דיברנו בפורום.

 

חדשות מעולם הפרונט אנד – ניוזלטר #4

השבוע בניוזלטר – טירוף הפוקימון גו מגיע לעולם הפרונט אנד, אימולטור של Terminal שכתוב בJS בלבד, איך אינסטגרם היה נראה בווינדוס 95, ועוד… 


הלינקים הנבחרים מהפורום

 

 

 

 

 

 

 

 

 

 

 

 

 

 

קצת על הניוזלטר והפורום

אחת לשבועיים מתקיים פורום בקרב מפתחי הפרונט אנד באאוטבריין. הפורום מתחלק לשני חלקים, הראשון: סבב שיתוף ידע בין אנשי הפורום, השני: הרצאה או דיון מעמיק על נושא מסוים בעולם הפרונט אנד. בניוזלטר הדו-שבועי שלנו תוכלו לקבל תקציר לכל הדברים עליהם דיברנו בפורום.

 

חדשות מעולם הפרונט אנד – ניוזלטר #3

השבוע בפורום עשינו סדנת CSS Flexbox שהועברה ע”י מפתחת הפרונט אנד (ומאסטרית הפלקסבוקס) קרן פרוכטר. קרן בנתה אפליקצית ווב קטנה עם 17 תרגילים בנושא. האפליקציה זמינה בקישור הבא, ואתם יותר ממוזמנים לבדוק את הידע שלכם בFlexbox:
https://flexworkshop.herokuapp.com

 



הלינקים הנבחרים מהפורום

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

קצת על הניוזלטר והפורום

אחת לשבועיים מתקיים פורום בקרב מפתחי הפרונט אנד באאוטבריין. הפורום מתחלק לשני חלקים, הראשון: סבב שיתוף ידע בין אנשי הפורום, השני: הרצאה או דיון מעמיק על נושא מסוים בעולם הפרונט אנד. בניוזלטר הדו-שבועי שלנו תוכלו לקבל תקציר לכל הדברים עליהם דיברנו בפורום.

 

חדשות מעולם הפרונט אנד – ניוזלטר #2

השבוע בפורום דיברנו בעיקר על כנס You Gotta Love Front End שהתקיים בשבוע שעבר בתיאטרון הבימה בתל אביב. בנוסף, הועלה דיון על שימוש בפריימוורקים לבניית Layout כאשר אחד הבולטים שבהם היה האחד שבו משתמשים בפרויקט של Angular Material שבין השאר משתמש גם בCSS Flexbox.

 

מפתחי הפרונט אנד של אאוטבריין בהרכב מלא בכנס YGLF2016

 



הלינקים הנבחרים מהפורום

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

קצת על הניוזלטר והפורום

אחת לשבועיים מתקיים פורום בקרב מפתחי הפרונט אנד באאוטבריין. הפורום מתחלק לשני חלקים, הראשון: סבב שיתוף ידע בין אנשי הפורום, השני: הרצאה או דיון מעמיק על נושא מסוים בעולם הפרונט אנד. בניוזלטר הדו-שבועי שלנו תוכלו לקבל תקציר לכל הדברים עליהם דיברנו בפורום.

 

חדשות מעולם הפרונט אנד – ניוזלטר #1

שלום! זהו הניוזלטר הראשון שלנו, אם קיבלתם את האימייל הזה, כנראה שהתעניינתם ונרשתם אליו. מה בתכנית? לינקים, מאמרים, כלים, הרצאות, ספריות וכל דבר אחר שקשור לעולם הפרונט אנד.

קצת על הניוזלטר והפורום

אחת לשבועיים מתקיים פורום בקרב מפתחי הפרונט אנד באאוטבריין. הפורום מתחלק לשני חלקים, הראשון: סבב שיתוף ידע בין אנשי הפורום, השני: הרצאה או דיון מעמיק על נושא מסוים בעולם הפרונט אנד.

 

נושא ההרצאה השבוע היה TypeScript והיא הועברה ע”י ולד יופה התותח! ההרצאה הוקלטה ותשותף בהמשך.


הלינקים הנבחרים מהפורום